在前端开发中，有许多涉及音频的应用场景，比如钢琴键盘、音乐游戏、音频播放器等，而 midi 文件作为一种简单且跨平台的音频格式，可以被广泛应用。本篇文章介绍如何使用 npm 包 midi-grabber 来获取 midi 文件信息，并解析为可读取的数据。
1. 什么是 midi-grabber
midi-grabber 是一个用于在浏览器中获取 midi 文件信息的 Node.js 库。它提供了读取 midi 文件的方法，并将 midi 数据解析为可读取的数据。使用 midi-grabber 可以使得我们更好地在前端应用中使用 midi 数据。
2. 安装 midi-grabber
如果我们想在项目中使用 midi-grabber，首先需要在项目中安装该包。打开命令行终端，进入到项目根目录下，执行以下命令即可：
npm install midi-grabber
3. 使用 midi-grabber
安装完 midi-grabber 后，即可开始使用。midi-grabber 提供了一个 readMidiFile 方法，用于读取 midi 文件并解析数据。下面通过一个简单的实例来演示如何使用：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- --- - -----------------------------------
-----------------------------
-------------- -- -
--------------------
--
-------------- -- -
-------------------
---上述代码先引入了 midi-grabber，在调用其 readMidiFile 方法时指定了 midi 文件的 URL，并使用 promise 来捕获异步操作的结果。接下来，我们需要了解一下 midi-grabber 返回的数据格式。
4. midi-grabber 数据格式
midi-grabber 返回的数据格式如下：
-- -------------------- ---- -------
-
------- ---------
------- -
-
------- -
-
------ ---------
-------- ---------- --------- ---------
--
---
-
--
---
-
-上述格式中，format 是 midi 文件的格式标识符，tracks 是一个数组，其中每个元素代表一条轨道，events 是该轨道中的事件数组。每个事件对象包含 delta 属性和 message 属性，分别表示该事件与上一个事件的时间间隔和事件的具体数据。message 是一个数组，包含了事件的类型和参数等信息。
5. 示例解析
通过上面的示例代码，我们得到了 midi 数据的读取结果，并通过 console.log 输出了该结果，现在解析一下这个结果。
以下为示例输出的 midi 数据：
{ format: 1,
tracks: [
{ events: [Array] },
{ events: [Array] },
{ events: [Array] }
]
}这个 midi 文件包括 3 条轨道，每条轨道的数据都存储在 tracks 数组的一个元素中。每个轨道又由多个事件组成，存储在 events 数组中。
以下是每条轨道的具体事件列表：
[
{ delta: 0, message: [ 255, 47, 0 ] },
{ delta: 0, message: [ 255, 81, 1, 120 ] },
{ delta: 0, message: [ 192, 8 ] },
{ delta: 960, message: [ 144, 57, 74 ] },
{ delta: 220, message: [ 128, 57, 64 ] },
...
]以上为第一条轨道的事件列表，每个事件对象包括了 delta 和 message 两个属性。
通过 deltas 属性可以得到每个事件与上一个事件之间的时间差，通过 message 属性，我们可以看到该事件的具体数据。例如，事件 [144, 57, 74] 表示将弹奏 57 键，并用 74 作为音量。而事件 [128, 57, 64] 则表示停止弹奏 57 键。
总结
在本篇文章中，我们介绍了 npm 包 midi-grabber 的使用方法，并解析了返回的 midi 数据格式。掌握这些内容，可以让我们更好地在前端项目中使用 midi 数据，并实现更多有趣的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f481d8e776d08041146