ByteNoteByteNote
视频里的 BGM 和音效,让 Tone.js 在浏览器里现做
字

字节笔记本

2026年10月28日 · 约 2 分钟读完

视频里的 BGM 和音效,让 Tone.js 在浏览器里现做

API中转
¥120

配音有了着落,视频的听觉层还差两块:配乐和音效。这次不用找素材库,Tone.js 的思路是在浏览器里直接造音乐。它是 Web Audio 之上的框架,官方定位给「在浏览器里做交互音乐」的人,架构让音乐人和音频程序员都能上手:高端有 DAW 级的全局 transport 和预置合成器、效果器,低端有高性能积木自己搭。1.5 万星、MIT 协议,npm 包 tone 已到 15.1.22,本系列第 17 个工具。

Tone.js 仓库:Web Audio 框架

一、Hello Tone 只有两行

上手示例能说明它的气质:建一个合成器接到输出,然后触发一个八分音符的中央 C。

js
import * as Tone from "tone";

const synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease("C4", "8n");

音符时长写的是 "8n",八分音符,音乐人看一眼就懂;engineer 看到的是函数调用,各取所需。再往上,transport 提供全局时间轴,同步和调度事件按小节走,鼓点、贝斯、旋律各占一条轨,这就是浏览器里的一台迷你 DAW。

效果器的接法是链式的,合成器接失真、再接混响、最后到 destination,一条链写完。预置合成器覆盖正弦、调频、采样播放等常见类型,意味着做出一段像样的 lo-fi 背景乐不需要任何音频工程背景。

Tone.js 的品牌 logo:粉绿撞色的波形折线

二、放进出片流水线

程序化 BGM 是它对出片的真正意义:视频要 90 秒轻快背景乐,agent 写一段和弦进行加节奏型,用 Tone.js 排布好,渲染输出音频文件再混进剪辑,换风格就是换参数重跑。转场音效、按钮反馈音这类小件更是顺手的事,不用在素材站里淘半天。

用起来两条路:npm 装包进工程,或者一个 script 标签从 unpkg 直引,原型阶段连构建配置都不用。

到这里,声音的三件套集齐了配音、配乐,还差最后一块:把语音变成文字。下一篇是 faster-whisper,字幕转录的提速担当。

相关文章

分享: