共计 2261 个字符,预计需要花费 6 分钟才能阅读完成。
正常情况下,文件都是有后缀名的,例如:坤坤运球.gif, 坤坤跳舞.avi
但是也有无后缀名的文件。尝试着把 坤坤运球.gif
的文件后缀去掉,然后用图片查看器打开该文件,同样能看到坤坤精湛的球技。
这说明,改变文件的后缀名,并不会影响文件本身的内容。同时也说明,文件的数据中,有东西能够标识出文件的类型。
说以上那么多,其实是想引出 Magic Number) 的概念。简单的来说,Magic Number 由文件数据中前几个字节组成,同一类型的文件这几个字节都是一样的,故而可以标识出一个文件的类型。由于这串数字从字面上来看是无法理解的,故而称之为 Magic Number,原名叫做:File Signatures(文件签名)。
利用 Magic Number 判断文件类型
首先这里有一个文件 url
,告诉你这是一个音频文件,你能看出它是什么类型的音频文件吗?
const url = 'https://0345-1400187352-1256635546.cos.ap-shanghai.myqcloud.com/rychou/e3801cfc517873a5a5471241e1da1869'
很显然是看不出来的,因为这个文件没有后缀。接下来看看如何利用 Magic Number
来判断这个音频文件的类型。
找到不同类型文件的 Magic Number
可以参考 Magic Number Table 中的数据,找到不同类型文件的 Magic Number。
例如:搜索 mp3, 找到 mp3 文件类型的 Magic Number 为:49 44 33
。注意这是个 16 进制数。
// 常见的音频文件的 magic number | |
const hexMap = { | |
'494433': 'mp3', | |
'664c614300000022': 'flac', | |
'2321414d52': 'amr', | |
'fff1': 'aac', | |
'fff9': 'aac', | |
'4f67675300020000000000000000': 'oga', | |
'52494646xxxxxxxx57415645666d7420': 'wav', | |
'3026b2758e66cf11a6d900aa0062ce6c': 'wma' | |
} | |
// 利用 16 进制字符串判断类型 | |
const isAAC = hex => !!hexMap[hex.slice(0, 4)] | |
const isMP3 = hex => !!hexMap[hex.slice(0, 6)] | |
const isAMR = hex => !!hexMap[hex.slice(0, 10)] | |
const isFLAC = hex => !!hexMap[hex.slice(0, 16)] | |
const isWAV = hex => !!hexMap[hex.slice(0, 32)] | |
const isWMA = hex => !!hexMap[hex.slice(0, 32)] | |
const isOGA = hex => !!hexMap[hex.slice(0, 28)] |
找到了文件的 Magic Number,要判断文件的类型就很简单了。
### 请求获取文件数据,并转成 Array Buffer
/** | |
* 加载文件 | |
* @param {string} url - audio file url | |
* @returns {Promise} | |
*/ | |
function loadFile(url) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest() | |
xhr.onreadystatechange = function() {if (xhr.readyState === 4) {resolve(xhr) | |
} | |
} | |
xhr.onerror = reject | |
xhr.open('GET', url, true) | |
xhr.responseType = 'arraybuffer' | |
xhr.send('') | |
}) | |
} |
buffer 转 16 进制字符串
/** | |
* buffer 转 16 进制字符串 | |
* @param {ArrayBuffer} buffer | |
* @returns | |
*/ | |
function buf2hex(buffer) { | |
// buffer is an ArrayBuffer | |
return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('') | |
} |
判断类型
function getAudioType(url) {return loadFile(url).then(xhr => {const hex = buf2hex(buffer) | |
if (isAAC(hex)) {return 'aac'} else if (isAMR(hex)) {return 'amr'} else if (isMP3(hex)) {return 'mp3'} else if (isFLAC(hex)) {return 'flac'} else if (isWAV(hex)) {return 'wav'} else if (isWMA(hex)) {return 'wma'} else if (isOGA(hex)) {return 'oga'} else {return false} | |
}) | |
} |
经过以上一系列操作,最终可以得出,该音频文件是个 aac
类型的文件。
总结
不只是音频文件,所有文件类型都可以通过 Magic Number
来判断文件类型,原理都是一样的,只要能找到这个数字,就能判断类型,不管有无文件后缀。
最后,根据以上的方法,以及最近项目中的实际需求,写了一个用于判断音频文件类型的 npm
包 —— audio-type-detect,供大家参考使用。