npm 包 tune.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

tune.js 是一个开源的通过 Web Audio API 实现音频合成和处理的 JavaScript 库，可以用于实现复杂的声音合成和信号处理，包括数字信号处理和混响效果等。它是一个常用的前端开发库，提供了许多便捷的 API，如果你想要深入学习音频处理或者实现声音效果的网站，tune.js 是一个非常不错的选择。

安装

你可以通过 npm 在你的项目中安装 tune.js：

npm install tune-js

或者通过 CDN 引入：

<script src="https://unpkg.com/tune-js/dist/tune.min.js"></script>

基础使用

创建一个生成声音的音频上下文

tune.js 使用 Web Audio API 生成音频，因此需要创建一个音频上下文：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

创建一个音调

tune.js 提供了一个简单的方法来生成持续的音调：

const freqHz = 440; // A4
const durationSecs = 5;
const sinewave = tune.createSineWave(freqHz, audioContext, durationSecs);

其中，freqHz 是音调的频率，audioContext 是前面创建的音频上下文，durationSecs 是持续时间（秒）。

播放音调

sinewave.play();

这个简单的示例将播放一个 440Hz 的 A 音调，持续 5 秒钟。播放音调会在 Web Audio API 上下文中生成一个播放节点，并将其连接到输出节点。你可以使用类似下面这样的代码停止播放：

sinewave.stop();

设置音调参量

你可以设置音调的各种参数，比如音量和频率等：

sinewave.volume = 0.5;
sinewave.frequency = 220;

这个例子将音量设为 0.5，将频率设为 220Hz。

监听音调事件

tune.js 支持监听以下事件：

play: 音调开始播放时触发。
stop: 音调停止播放时触发。

你可以通过以下方式注册事件处理程序：

sinewave.on("play", () => {
  console.log("playing");
});

sinewave.on("stop", () => {
  console.log("stopped");
});

创建一个音序列

tune.js 还提供了一个简单的方法来生成一个音符序列：

const notes = [
  { note: "C4", duration: 1 },
  { note: "E4", duration: 1 },
  { note: "G4", duration: 1 },
];
const song = tune.createSong(notes, audioContext);

其中，notes 是一个包含音符和时长的数组，audioContext 是前面创建的音频上下文。如果你想建立更长的曲目，你可以把它们连接起来：

const song = tune.createSong([...notes, ...notes, ...notes], audioContext);

播放音序列

song.play();

这个例子将播放 C4、E4 和 G4 三个音符，每个音符持续一个二分之一秒。

安装 demo

运行以下命令：

npm install
npm run serve

你可以通过在 http://localhost:8080 打开网页访问 demo。在这个 demo 中，你可以看到如何用 tune.js 创建一个音符序列，并且你可以尝试设置它的各种参数。同时，你还可以在控制台中查看事件的信息。

总结

tune.js 是一个非常适合前端开发者学习音频处理或者实现声音效果的 JavaScript 库。本教程介绍了如何创建基本的音调和音符序列，并展示了如何在 Web Audio API 上下文中播放它们。希望这篇文章能对你有帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005676a81e8991b448e3da3