Web Audio 效果链的核心是 connect() 的路由能力,支持一对多连接、通道索引指定及输入输出精准匹配,实现干/湿分离、并行处理、动态重路由与安全反馈环路。

构建复杂的 Web Audio 效果链,核心不是堆砌节点,而是用好 connect() 的路由能力,让信号按需分流、并行处理、精准汇合。关键在于理解“连接”不是物理连线,而是定义数据流向、通道索引和混音逻辑。
掌握 connect() 的三种连接方式
同一个源节点可以连多个目标,但每条路径的语义不同:
-
node.connect(destination):最常用,等价于
node.connect(destination, 0, 0),把当前节点默认输出(第 0 通道)接到目标节点默认输入(第 0 输入口)。适合线性链路,比如Oscillator → GainNode → destination。 -
node.connect(destination, outputIndex):指定从本节点的某个输出通道出发。例如
ChannelSplitter有多个输出,splitter.connect(panner, 1)表示取右声道送入声像器。 -
node.connect(destination, outputIndex, inputIndex):完全可控——明确从哪输出、进哪输入。这对
ChannelMergerNode(多输入合并)、自定义AudioWorkletNode尤其重要,比如把失真效果接进混响链的第二路输入。
实现干/湿分离与并行处理
专业效果链常需保留原始信号(干声)同时叠加处理后信号(湿声),不能靠单次连接“一分二”,而要显式创建多路分支:
- 一个
BufferSourceNode可同时connect()到GainNode(干路)和ConvolverNode(湿路),Web Audio 允许一对多连接。 - 用独立
GainNode分别控制干声电平和湿声强度,再统一接入destination自动混音;或先用ChannelMergerNode合并多路,再整体调控。 - 示例:让合成器音色同时走滤波器链和延迟链,最后混合:
source.connect(filter); filter.connect(merger, 0, 0);source.connect(delay); delay.connect(merger, 0, 1);
动态切换与安全重路由
运行时修改音频图必须兼顾有效性与时序,否则会中断播放或引发错误:
立即学习“前端免费学习笔记(深入)”;
- 断开连接用
node.disconnect(),可不带参数(断开所有)或指定目标(node.disconnect(target)),避免误删其他路径。 - 重连前确认节点仍处于活动状态(未被垃圾回收),尤其注意
AudioBufferSourceNode播放结束后自动失效,不可复用。 - 需要实时开关效果时,推荐用
GainNode.gain.setValueAtTime(0, ctx.currentTime)静音某支路,比频繁disconnect/connect更稳定、无爆音风险。
构建反馈环路(如合唱、镶边)
反馈不是简单把输出连回输入,必须加入延时与衰减控制,否则瞬间饱和破音:
- 典型结构:主信号 →
DelayNode(设 10–50ms 延迟)→GainNode(增益设为 0.6–0.9)→ 回接到自身或前级节点。 - 延迟值越小、增益越高,效果越尖锐(如镶边);延迟稍长、增益适中,则倾向合唱感。
- 务必在反馈路径上加
GainNode作“闸门”,启动时设gain.value = 0,再逐步提升,防止初始冲击。



















