在前端开发中，我们经常会需要在页面中使用音频或者视频，而对于一些需要根据音频元数据进行展示的场合，我们需要用到一个库来进行音频信息解析。其中一个比较优秀的库是 music-metadata-browser，它可以在浏览器上进行音频元数据的解析，支持多种音频格式，本文将为大家详细介绍使用该包的方法。
安装
首先，我们需要使用 npm 进行安装：
npm install music-metadata-browser
引入并使用
安装完成后，我们就可以使用该库了，在需要使用该库的文件中引入：
import * as mm from 'music-metadata-browser';
然后，我们就可以使用 mm 中的方法进行音频元数据的解析，例如：
mm.parseBlob(audioBlob).then((metadata) => {
console.log(metadata);
});其中，audioBlob 是一个文件 Blob 对象，我们需要获取到该对象后，就可以使用 parseBlob 方法进行解析了。方法返回一个 Promise 对象，我们可以在 .then() 中获取到解析后的 metadata 信息。
详细解析
在上面的例子中，我们只是简单地获取到了音频元数据的信息，但是实际上，该库提供了更加丰富的 API，可以获取到更加详细的信息，下面是一些常用的 API：
parseBlob
mm.parseBlob(blob, options)
该方法接收一个 Blob 对象和一些可选的参数，返回一个 Promise 对象，我们可以通过 .then() 获取到解析后的音频元数据信息。
parseBuffer
mm.parseBuffer(buffer, mimeType, options)
该方法接收一个 ArrayBuffer 对象、一个 mimeType 字符串以及一些可选的参数，返回一个 Promise 对象，我们可以通过 .then() 获取到解析后的音频元数据信息。
parseFromTokenizer
mm.parseFromTokenizer(tokenizer, options)
该方法接收一个 tokenizer 对象和一些可选的参数，返回一个 Promise 对象，我们可以通过 .then() 获取到解析后的音频元数据信息。该方法一般用于自定义音频解析器。
解析的元数据信息
无论是哪种解析方法，最终返回的 metadata 对象都包含了很多音频元数据信息，我们可以通过该对象获取到我们需要的信息，下面是一些常用的属性：
- format：音频格式
- duration：音频时长，单位为秒
- bitRate：比特率，单位为 bps
- sampleRate：采样率，单位为 Hz
- numberOfChannels：音频频道数
- tag：标签信息
除了以上这些属性外，metadata 对象中还有很多其他的属性，可以通过官方文档进行查看。
示例代码
下面是一个完整的示例代码，可以作为参考：
-- -------------------- ---- -------
------ - -- -- ---- -------------------------
----- ----- - --------------------------------------
----- ----- - ---------------------------------
----- ----- - ---------------------------------
----- ------ - ----------------------------------
----- ----- - ---------------------------------
-------------------------------- -- -- -
-------------------------------------------- -- -
--------- - ------------------------------------
--------------- - --------------------- -- ---
---------------- - ---------------------- -- ---
--------------- - --------------------- -- ---
---
---该代码中，我们监听了一个 input[type=file] 元素的 change 事件，当用户选择了一个音频文件后，我们使用 mm.parseBlob 方法对文件进行解析，并获取到常用的元数据信息，然后进行展示。同时，我们也将音频文件设置为 audio 元素的 src 属性，实现了在页面中播放音频。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0285a4403f2923b035bd51