Web Audio中connect()有三种形式:节点连节点、节点连参数、节点连目的地;混用会导致静音或报错;多路输入自动相加需控幅;所有节点须属同一AudioContext;start()前必须完成connect()且链路终点为destination。

connect() 的三种调用形式必须分清
Web Audio 中 connect() 不是单一方法,而是三个重载签名共存:节点连节点、节点连参数、节点连目的地。混用会导致静音或报错,比如把 gainNode.connect(analyserNode.frequencyBinCount) 这种写法当真——frequencyBinCount 是只读属性,不是 AudioParam,根本不能接。
常见错误现象包括:调用后没声音、控制台报 InvalidAccessError 或 NotSupportedError、增益调节失效。
-
nodeA.connect(nodeB):最常用,把nodeA的输出连到nodeB的默认输入(索引 0) -
nodeA.connect(nodeB, outputIndex, inputIndex):显式指定哪路输出连哪路输入,适用于多通道节点(如ChannelSplitterNode有多个输出) -
nodeA.connect(paramB):把音频信号作为调制源,动态改变参数值(例如用振荡器调制滤波器截止频率)
多路输入自动相加的规则必须主动应对
当你把 sourceA、sourceB 都 .connect(mixGain),Web Audio 会把它们的 PCM 样本逐点相加再送入 mixGain。这不是“混合开关”,而是数学加法——两路满幅正弦波叠加后幅度翻倍,超出 [-1, 1] 范围就削波(clipping),听起来像爆音或失真。
这不是 bug,是设计使然。你得自己控幅。
立即学习“前端免费学习笔记(深入)”;
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 混音前务必设
mixGain.gain.setValueAtTime(0.5)(双轨)或更低(三轨以上建议 0.33) - 不要依赖
gain.value = 0.5,它只设初始值,不防后续动态变化导致的溢出 - 若需实时监测电平,必须接
analyserNode并读getByteFrequencyData(),不能靠肉耳判断
AudioContext 一致性是 connect 失败的隐藏原因
所有参与 .connect() 的节点,必须来自同一个 AudioContext 实例。跨上下文连接会静默失败(无报错),但链路不通——比如你在页面初始化时创建了一个 audioCtx1,又在某个模块里误写了 new AudioContext() 得到 audioCtx2,然后试图把 audioCtx1 创建的 source 连到 audioCtx2 创建的 filter,结果就是无声。
尤其注意第三方库(如 Tone.js、Howler.js)可能内部封装并管理自己的上下文。
- 全局只复用一个
AudioContext,声明为const audioContext = new (window.AudioContext || window.webkitAudioContext)() - 创建节点时一律用
audioContext.createGain(),而非脱离上下文的独立构造 - iOS Safari 下首次需用户交互后调用
audioContext.resume(),否则所有节点处于 suspended 状态,connect()虽不报错,但无实际通路
start() 和 connect() 的时序陷阱不能颠倒
connect() 只建立信号通路,不触发播放;start() 才真正把数据推入链路。但很多人在没 connect() 到 destination 的情况下就调 source.start(),结果是音频被“吃掉”——它确实解码并开始生成样本,但因为没通路,数据直接丢弃,毫无反应。
反过来,先 connect() 后 start() 也不够,还必须确保 destination 已就绪。
- 正确顺序:创建节点 →
.connect()形成完整链路(终点必须是audioContext.destination或其下游节点)→ 调source.start(audioContext.currentTime) - 对
AudioBufferSourceNode,start()只能调一次;重复调会抛InvalidStateError,需重建节点 - 别用
audioElement.play()混搭,它走的是媒体元素播放管线,和 Web Audio 的MediaElementAudioSourceNode是两套逻辑,容易冲突


















