在前端开发中，我们经常会需要在页面中使用音频或者视频，而对于一些需要根据音频元数据进行展示的场合，我们需要用到一个库来进行音频信息解析。其中一个比较优秀的库是 music-metadata-browser，它可以在浏览器上进行音频元数据的解析，支持多种音频格式，本文将为大家详细介绍使用该包的方法。
安装
首先，我们需要使用 npm 进行安装：
--- ------- ----------------------
引入并使用
安装完成后，我们就可以使用该库了，在需要使用该库的文件中引入：
------ - -- -- ---- -------------------------
然后，我们就可以使用 mm 中的方法进行音频元数据的解析，例如：
--------------------------------------- -- - ---------------------- ---
其中，audioBlob 是一个文件 Blob 对象，我们需要获取到该对象后，就可以使用 parseBlob 方法进行解析了。方法返回一个 Promise 对象，我们可以在 .then() 中获取到解析后的 metadata 信息。
详细解析
在上面的例子中，我们只是简单地获取到了音频元数据的信息，但是实际上，该库提供了更加丰富的 API，可以获取到更加详细的信息，下面是一些常用的 API：
parseBlob
------------------ --------
该方法接收一个 Blob 对象和一些可选的参数，返回一个 Promise 对象，我们可以通过 .then() 获取到解析后的音频元数据信息。
parseBuffer
---------------------- --------- --------
该方法接收一个 ArrayBuffer 对象、一个 mimeType 字符串以及一些可选的参数，返回一个 Promise 对象，我们可以通过 .then() 获取到解析后的音频元数据信息。
parseFromTokenizer
-------------------------------- --------
该方法接收一个 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