在前端开发中，我们常常需要使用 MIDI 音乐作为交互效果或背景音乐。但是在 HTML5 中，没有直接支持 MIDI 处理的 API。不过，好在有 npm 包 midi-bricks，它可以用 JavaScript 来处理 MIDI 事件，让我们可以在 Web 应用中方便地使用 MIDI 音乐。
安装
首先，我们需要使用 npm 安装 midi-bricks：
npm install midi-bricks
使用
安装后，我们就可以在代码中使用 midi-bricks 了。我们来看一个简单的例子：使用 MIDI 音乐播放一段乐器试音。
-- -------------------- ---- ------- ------ - ------- ---------- - ---- -------------- ----- ------ - --- --------- ----- ---------- - --- -------------------- ----- ----- - - - ----- ------- --------- --- -- - ----- ------- --------- --- -- - ----- ------- --------- --- -- - ----- ------- --------- --- -- - ----- ------- --------- --- -- - ----- ------- --------- --- -- - ----- ------- --------- --- -- - ----- ------- --------- --- -- -- --------------------------------- ----------------------- --------------
以上代码首先创建了一个 Player 实例，然后创建了一个 Instrument 实例用于演奏钢琴声音。接着，定义了一组音符信息，每个音符包含音高信息和持续时间信息。最后，把 Instrument 实例和音符信息加入 Player 实例，并播放乐曲。
进一步学习
midi-bricks 提供了很多 API，我们可以通过官方文档深入了解，从而使用更多更复杂的音乐效果。这里仅仅列举一些常用 API：
Player
addInstrument(instrument: Instrument): void：新增一个乐器。addTrack(notes: Note[], channel?: number): void：新增一组音符，可以指定乐器通道。play(time?: number): Promise<number>：开始播放乐曲，返回 Promise 对象。pause(time?: number): Promise<number>：暂停播放乐曲，返回 Promise 对象。stop(time?: number): Promise<number>：停止播放乐曲，返回 Promise 对象。currentTime(): number：返回当前播放时间。
Instrument
每个乐器有一些特殊属性和方法，这里以 Piano 类型为例。
setVolume(volume: number): void：设置音量。setChannel(channel: number): void：设置乐器通道。setBank(bank: number): void：设置音色库。setProgram(program: number): void：设置音色。noteOn(notes: string[], velocity: number, time?: number): void：按下某些键，触发一组音符，可以指定时间。noteOff(notes: string[], time?: number): void：松开某些键，停止一组音符，可以指定时间。
Note
keys: string[]：音符的键数组。duration: string：音符的持续时间。time?: number：音符开始的时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/112672