midi-synth 是一款用于生成 MIDI 音乐的 npm 包，可以使用它来创建新音乐或者将现有 MIDI 文件进行修改和修改。在本教程中，我们将深入学习如何使用 midi-synth 去搭建一个 MIDI 音乐编辑器。
安装和配置 midi-synth
首先，我们需要在项目中安装 midi-synth 包。在终端中输入以下命令：
--- ------- ---------- ------
安装完成之后，我们还需要一个额外的包—— MIDI 文件解析器。同样的，输入以下代码进行安装：
--- ------- --------- ------
接下来，我们需要将这两个包引入到我们的代码中：
----- ---- - --------------------- ----- ----- - ----------------------
创建一个简单的 MIDI 音乐
现在我们已经配置好环境，可以通过以下代码生成一个简单的 MIDI 文件：
----- ---- - -
------- -
------- --
------- --
------------- ---
--
------- --
------ --
-------- --
----- ---------
----------- ---
--------- ---
-- -
------ ----
-------- --
----- ----------
----------- ---
--------- ---
--
--
----- ----- - --- --------
----- ------ - ---------------------
--------------------首先，我们定义一个“midi”对象，包含 MIDI 文件的头部和音轨信息。在这种情况下，我们创建了一个包含钢琴按键按下和弹起两个音符的音轨。
接下来，我们使用 midi-synth 创建一个合成器实例，并调用 generate() 函数来创建一个 MIDI 语序的 ArrayBuffer。
在浏览器上运行代码，控制台应该会输出一个带有 ArrayBuffer 数据的信息，这个数据将在稍后用于创建 MIDI 文件。
将 MIDI 数据转化为 MIDI 文件
现在我们已经生成了 MIDI 数据，我们需要将其转化为 MIDI 文件。在这步需要使用到刚才安装的 MIDI 文件解析器。
----- -------- - --- ------------------- ----- -------- - ---------------------- ----- --------- - ---------------------------- ------------------------ --- ---------------------- ---------- -- - ---- -------
代码中，我们首先将 ArrayBuffer 转化为 Uint8Array 数据，再将其解码为 MIDI 数据对象。最后，使用 writeFileSync() 函数将 MIDI 文件保存到本地。
打开生成的 MIDI 文件，我们会发现它只包含约一秒钟的钢琴声。虽然简单，但是这个例子展示了如何使用 midi-synth 生成 MIDI 数据并将其转化为 MIDI 文件。
在 Web 应用中使用 midi-synth
接下来，我们将展示如何在 Web 应用中使用 midi-synth 去生成 MIDI 数据。
第 1 步： 配置 Web Audio API
midi-synth 需要用到 Web Audio API 去播放 MIDI 音乐。因此，我们需要在 HTML 文件中引入如下代码：
--------- -----
------
------
----- ----------------
----------- ----- ---------------
-------
------
------- -------------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------
-------
-------这里我们使用最新版本的 WebComponents.js 和 Tone.js。Tone.js 是一款 Web 合成器库，可以帮助我们与 Web Audio API 交互。
第 2 步：定义合成器实例
----- ----- - --- -------
------------ ------------
----------- -
--- ----------------
--- ---------------
-
---在这里我们定义了一个新的 Synth() 实例，并传入了一个 options 对象添加了 Vibrato 和 Tremolo 的效果。此外，我们还将合成器的输出路由至 Tone.Master。
第 3 步：生成 MIDI 数据
----- ---- - -
------- -
------- --
------- --
------------- ---
--
------- --
------ --
-------- --
----- ---------
----------- ---
--------- ---
--
--
----- ------ - ---------------------
----- -------- - --- -------------------
----- -------- - ----------------------在这里我们定义了一个简单的 MIDI 文件，包含了一个钢琴按键按下的音符。接下来，我们使用 midi-synth 生成 MIDI 数据，并将数据转化为 MIDI 文件。
第 4 步：播放 MIDI 音乐
----- ------ - --- ------------- ---- ------------------------- - ----------------------- ------------------- -----------------------
在这里，我们使用 Tone.Player 播放 MIDI 文件。我们将 MIDI 文件编码为 base64 数据，并传递给 url。然后，我们使用 toDestination() 将播放音频路由至输出设备，可以是扬声器或耳机等。最后，我们使用 sync() 和 start() 函数将播放器与 Web Audio API 同步，并在 0 秒处开始播放音乐。
结论
midi-synth 是一个非常强大的合成器库，可以帮助我们生成各种各样的 MIDI 音乐。通过本文的学习，我们了解了如何使用 midi-synth 生成 MIDI 数据和 MIDI 文件，并介绍了如何在 Web 应用中使用合成器播放 MIDI 音乐。希望这篇教程可以帮助你更深入地了解 midi-synth 的使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f481d8e776d0804117a