npm 包 midi-synth 使用教程-JavaScript中文网-JavaScript教程资源分享门户

midi-synth 是一款用于生成 MIDI 音乐的 npm 包，可以使用它来创建新音乐或者将现有 MIDI 文件进行修改和修改。在本教程中，我们将深入学习如何使用 midi-synth 去搭建一个 MIDI 音乐编辑器。

安装和配置 midi-synth

首先，我们需要在项目中安装 midi-synth 包。在终端中输入以下命令：

npm install midi-synth --save

安装完成之后，我们还需要一个额外的包—— MIDI 文件解析器。同样的，输入以下代码进行安装：

npm install midi-file --save

接下来，我们需要将这两个包引入到我们的代码中：

const Midi = require('midi-file');
const Synth = require('midi-synth');

创建一个简单的 MIDI 音乐

现在我们已经配置好环境，可以通过以下代码生成一个简单的 MIDI 文件：

-- -------------------- ---- -------
----- ---- - -
  ------- -
    ------- --
    ------- --
    ------------- ---
  --
  ------- --
    ------ --
    -------- --
    ----- ---------
    ----------- ---
    --------- ---
  -- -
    ------ ----
    -------- --
    ----- ----------
    ----------- ---
    --------- ---
  --
--

----- ----- - --- --------
----- ------ - ---------------------
--------------------

首先，我们定义一个“midi”对象，包含 MIDI 文件的头部和音轨信息。在这种情况下，我们创建了一个包含钢琴按键按下和弹起两个音符的音轨。

接下来，我们使用 midi-synth 创建一个合成器实例，并调用 generate() 函数来创建一个 MIDI 语序的 ArrayBuffer。

在浏览器上运行代码，控制台应该会输出一个带有 ArrayBuffer 数据的信息，这个数据将在稍后用于创建 MIDI 文件。

将 MIDI 数据转化为 MIDI 文件

现在我们已经生成了 MIDI 数据，我们需要将其转化为 MIDI 文件。在这步需要使用到刚才安装的 MIDI 文件解析器。

const midiData = new Uint8Array(buffer);
const midiFile = Midi.decode(midiData);
const writeFile = require('fs').writeFileSync;
writeFile('example.mid', new Buffer.from(midiFile), 'binary'); // 将 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 步：定义合成器实例

const synth = new Synth({
  destination: Tone.Master,
  harmonizer: [
    new Synth.Vibrato(),
    new Synth.Tremolo()
  ]
});

在这里我们定义了一个新的 Synth() 实例，并传入了一个 options 对象添加了 Vibrato 和 Tremolo 的效果。此外，我们还将合成器的输出路由至 Tone.Master。

第 3 步：生成 MIDI 数据

-- -------------------- ---- -------
----- ---- - -
  ------- -
    ------- --
    ------- --
    ------------- ---
  --
  ------- --
    ------ --
    -------- --
    ----- ---------
    ----------- ---
    --------- ---
  --
--

----- ------ - ---------------------
----- -------- - --- -------------------
----- -------- - ----------------------

在这里我们定义了一个简单的 MIDI 文件，包含了一个钢琴按键按下的音符。接下来，我们使用 midi-synth 生成 MIDI 数据，并将数据转化为 MIDI 文件。

第 4 步：播放 MIDI 音乐

const player = new Tone.Player({
  url: 'data:audio/midi;base64,' + base64.encode(midiFile)
}).toDestination();

player.sync().start(0);

在这里，我们使用 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

npm 包 midi-synth 使用教程