Melody 是一个基于 Web Audio API 实现的用于音频合成的 npm 包。它提供了一种方便的方式用 JavaScript 代码创建音乐和声音效果，且能够兼容绝大部分现代浏览器。
在本文中，我们会介绍 Melody 的基本用法和一些常见的应用场景，并通过示例代码详细展示它的使用方法。
安装
使用 npm 族指令安装 Melody 十分简单。
打开终端（或命令行工具）并输入：
npm install melody
基本用法
Melody 提供了三个主要的音频实体类：Melody, Track 和 Effect。在使用 Melody 时，我们通常先要创建一个 Melody 实例，然后向它添加一个或多个 Track，最后再增加一些 Effect 以调节音效。
首先，我们来创建一个 Melody 实例。在代码中输入：
import { Melody } from "melody";
// 新建 Melody 实例
const melody = new Melody();现在我们已经创建了一个名为 melody 的 Melody 实例。接下来，我们需要向它添加一个 Track 实体来生成音频。
// 新建 Track 实例
const track = melody.createTrack({ sound: "sine" });
// 向 track 中添加一个音频事件
track.addEvent({ time: 0, duration: 1, note: "C4", velocity: 128 });
// 开始播放音乐
melody.play();在 Melody 实例中， createTrack() 方法接受一个可选的参数来指定音频实体的类型。在上述代码中，我们通过 { sound: "sine" } 参数来告诉 Melody ，我们将使用“正弦”音色来生成音频。
这里的 track.addEvent() 方法可用于向音频轨道中添加音频事件。在代码中，我们通过添加 { time: 0, duration: 1, note: "C4", velocity: 128 } 参数来指定我们的音频事件，它将在 time（0 秒）开始播放，并持续 duration（1 秒）。
最后，在调用 melody.play() 方法后，将开始播放生成的音乐。
应用场景
创建节奏
我们可以使用 Melody 来生成令人兴奋的节奏。下面的代码通过添加多个音频事件来构建一个四分音符。
-- -------------------- ---- ------- ----- ----- - -------------------- ------ ------ --- ----- ------ - - - ----- -- --------- ---- ----- ----- --------- --- -- - ----- ---- --------- ---- ----- ----- --------- --- -- - ----- -- --------- ---- ----- ----- --------- --- -- - ----- ---- --------- ---- ----- ----- --------- --- -- -- ---------------------- -- -----------------------
在这个例子中，我们根据时长（0.5 秒）和音符（C5、G5、A5）设置了一个时间表，以创建一个有趣的节奏。
创建和弦
我们也可以使用 Melody 来生成和弦，比如 C 大调的和弦：
-- -------------------- ---- ------- ----- ------ - -------------------- ------ ------ --- ----- ------ - -------------------- ------ ------ --- -- --------- ----------------- ----- -- --------- -- ----- ----- --------- --- --- ----------------- ----- -- --------- -- ----- ----- --------- --- --- ----------------- ----- -- --------- -- ----- ----- --------- --- --- ----------------- ----- -- --------- -- ----- ----- --------- --- --- ----------------- ----- -- --------- -- ----- ----- --------- --- --- ----------------- ----- -- --------- -- ----- ----- --------- --- --- -- --------- ----- ---------- - ------------------- --------- ------------------------
在这里，我们在两个不同的音频轨道上创建了两个 C 大调的和弦。然后，我们使用 melody.mix() 方法混合它们，以便它们一起播放。
添加音效
Melody 可以添加音效来增强音频的魅力。下面我们用 Phaser 效果添加光滑效果：
-- -------------------- ---- ------- ------ - ------------ - ---- --------- ----- ----- - -------------------- ------ ------ --- ---------------- ----- -- --------- -- ----- ----- --------- --- --- -- -- ------ -- ----- ------ - --- --------------- ------------------------ --------------
在上述代码中，我们通过使用 import { PhaserEffect } from "melody" 引入了 Phaser 特效库的模块。然后，我们在音频轨道中添加了 PhaserEffect 特效实例，并将其作用于音频轨道。
总结
Melody 是一个极其强大又易于使用的 npm 包。它底层使用 Web Audio API，以方便地从 JavaScript 代码中生成音频和添加效果。希望本文对您有所帮助，您可以通过参考本文示例代码来快速上手开始使用 Melody。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040aef