Web Audio API 的 play() 不支持混音，必须用 AudioContext 搭建路由，通过 GainNode 等节点处理信号；HTMLMediaElement 仅适合单轨播放，AudioBufferSourceNode 才是混音基础。
Web Audio API 的 play() 本身不支持混音，得自己搭路由
浏览器里调用多个 Audio 实例的 play()，只是“同时触发播放”，不是真正混音——各音频走独立解码和输出通路，互相不叠加、不控制增益、无法调节相位或延迟。真要混音，必须用 Web Audio API 把它们接入同一个 AudioContext，再通过 GainNode、ChannelMergerNode 或 ConvolverNode 等节点做信号处理。
常见错误现象：audio1.play(); audio2.play(); 听起来像在抢声卡，有时还触发策略拦截（尤其移动端），根本没声音；或者两个音频明明都“播了”，但音量没叠加，甚至因相位抵消变轻。
- 使用场景：游戏音效叠加、语音+背景乐同步、多轨录音预览
- 关键区别：HTMLMediaElement（
<audio></audio>）适合单轨播放；AudioContext+AudioBufferSourceNode才是混音基础设施 - 兼容性注意：Safari 对
AudioContext懒启动更严格，首次交互前不能自动播放，需绑定到用户手势（如click）
用 decodeAudioData() 加载后手动混入同一 AudioContext
直接 new Audio().src = 'x.mp3' 无法接入 Web Audio 路由，必须先解码成 AudioBuffer，再用 AudioBufferSourceNode 推入上下文。这个过程不可跳过，也没有“自动混音”捷径。
实操建议：
- 所有音频资源提前用
fetch()+arrayBuffer加载，避免多次网络请求阻塞 - 解码后缓存
AudioBuffer，重复播放别反复解码（decodeAudioData()是 CPU 密集型操作） - 每个音源都要显式调用
start()，并传入精确时间戳（如context.currentTime），否则不同步 - 示例关键片段：
const ctx = new (window.AudioContext || window.webkitAudioContext)(); fetch('sfx1.wav').then(r => r.arrayBuffer()).then(buf => ctx.decodeAudioData(buf)).then(buffer => { const source = ctx.createBufferSource(); source.buffer = buffer; source.connect(ctx.destination); // 或 connect 到 mixer node source.start(ctx.currentTime); // 此刻立即播放 });
GainNode 和 ChannelMergerNode 的分工别搞反
混音 ≠ 把所有音源 connect 到 ctx.destination 就完事。那样只是并联输出，音量会爆表失真，也无法单独控音量或静音某轨。真正可控的混音，得靠中间节点做路由和缩放。
-
GainNode：每轨一个，用来调音量、做淡入淡出（改gain.value或用gain.setValueAtTime()） -
ChannelMergerNode：仅当需要合并多声道（如左轨+右轨合成立体声）时才用；普通混音直接让多个GainNode都connect到同一个DestinationNode即可 - 性能影响：每多一个
GainNode增加微量计算开销，但几十个以内几乎无感；滥用ChannelMergerNode反而可能引入不必要的重采样 - 容易踩的坑：把
source直接连destination，再连GainNode——顺序错了，GainNode必须在source和destination之间
移动端自动播放策略让混音逻辑更脆弱
iOS Safari 和 Android Chrome 都要求音频首次播放必须由用户手势触发，且整个 AudioContext 必须在该手势内 resume（如果被 suspend）。这意味着：你不能在页面加载完就解码+准备音源，也不能在定时器里偷偷 start()。
- 典型错误：页面 onload 后立刻
ctx.resume()→ 失败，ctx.state保持suspended - 正确做法：把所有初始化（创建 context、解码 buffer、连接节点）做完，但
source.start()和ctx.resume()留到用户点击/触摸事件回调里 - 兼容写法：
button.addEventListener('click', () => { if (ctx.state === 'suspended') ctx.resume(); source.start(ctx.currentTime); }); - 额外注意：iOS 上一旦
context被 suspend，后续即使用户再点，也得重新 resume；有些机型还会在后台切回前台后自动 suspend
混音真正的复杂点不在 API 调用，而在时间对齐、上下文生命周期管理、以及跨设备策略适配——尤其是 resume 时机稍有偏差，整条音频链就哑火。这些细节没法靠查文档一次理清，得在真机上反复试错。
