Tone.js 简介
Tone.js 是基于 Web Audio API 的前端音频框架，专为在浏览器中创建交互式音乐而设计。它把底层的 AudioContext 抽象为更符合音乐创作习惯的概念（如音符、节拍、Transport），让音乐人和音频程序员能够用 JavaScript 像使用数字音频工作站（DAW）一样编排、合成和处理声音。
主要特性
| 类别 | 关键功能 | 说明 |
|---|---|---|
| 时间调度 | Tone.Transport、Tone.Part、Tone.Sequence |
支持精准的节拍、循环、事件排程，适合谱写复杂的音乐结构。 |
| 合成器 & 采样器 | Tone.Synth、Tone.PolySynth、Tone.Sampler、Tone.FMSynth 等 |
内置多种波形、调制和采样方案，快速生成乐器音色。 |
| 音效处理 | Tone.Reverb、Tone.Delay、Tone.Filter、Tone.Compressor 等 |
提供常用的混响、延迟、滤波、压缩等效果模块，可自由链式连接。 |
| 信号路由 | Tone.Gain、Tone.Bus、Tone.Route |
类似音频混音台的路由系统，支持多声部混合与分配。 |
| MIDI 与外设 | Tone.Midi、Tone.WebMidi |
直接读取 MIDI 输入，方便硬件控制器与网页交互。 |
| 跨平台兼容 | 自动创建并兼容各浏览器的 AudioContext，支持移动端 |
开发者无需手动处理浏览器差异。 |
安装与使用
1. npm / Yarn 安装（推荐）
npm install tone # 或 yarn add tone
在项目中直接导入：
import * as Tone from 'tone';
通过 npm 安装后即可使用完整的 ES 模块，适合现代前端构建工具。
2. CDN 引入（快速实验）
<script src="https://cdn.jsdelivr.net/npm/tone@latest/build/Tone.min.js"></script>
或使用 cdnjs：
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.9/Tone.js"
integrity="sha512-nUjml8mN4CNYqBAy0ndDrd8pJV/eTtBNDsnvNtPqozx9/BccUeWSoKW14qWkQUnhuh8E3m+yra3qdzM68lqPEQ=="
crossorigin="anonymous"></script>
两种 CDN 均提供最新的压缩版库，适合在 CodePen、JSFiddle 等在线编辑器中直接使用。
3. 官方仓库与文档
- GitHub 项目地址： https://github.com/Tonejs/Tone.js
- 官方文档与示例： https://tonejs.github.io/ （包含 API 手册、交互示例）
- 国内镜像（GitCode）： https://gitcode.com/gh_mirrors/to/Tone.js
简单示例：播放一个 C4 音符
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/tone@latest/build/Tone.min.js"></script>
</head>
<body>
<button id="play">Play C4</button>
<script>
const synth = new Tone.Synth().toDestination();
document.getElementById('play').addEventListener('click', async () => {
await Tone.start(); // 确保用户交互已激活 AudioContext
synth.triggerAttackRelease('C4', '8n');
});
</script>
</body>
</html>
点击按钮即可在浏览器中听到一个八分音符的 C4。
小结
Tone.js 把 Web Audio API 的底层复杂度封装为音乐创作友好的高级 API，提供 时间调度、合成器、音效、路由、MIDI 等完整的音频工具链。通过 npm 或 CDN 均可快速引入，配合官方文档和示例，即可在网页、游戏、交互艺术等场景中实现高质量的交互式音乐功能。
声明：文章均为AI生成，请谨慎辨别信息的真伪和可靠性！