HTML5 AudioContext支持低延迟高精度音频处理，需基于节点连接模型构建Audio Graph，通过createBufferSource等创建音源，用connect链式连接节点，混音可用多路connect或ChannelMergerNode，音效依赖BiquadFilterNode、DelayNode等，注意性能优化与浏览器兼容性。
HTML5 的 AudioContext 提供了低延迟、高精度的音频处理能力，支持实时混音、滤波、变调、回声等音效处理。关键在于理解 Web Audio API 的节点连接模型和时间调度机制。
构建基础音频图（Audio Graph）
所有处理都围绕 AudioContext 展开，它是一个音频处理环境，通过连接各种 AudioNode（如 GainNode、BiquadFilterNode、ConvolverNode）形成信号流图。
- 用
new AudioContext()创建上下文，注意需在用户交互（如点击）后触发，避免被浏览器静音策略阻止 - 音频源可用
context.createBufferSource()（加载完成的音频）、context.createMediaStreamSource(stream)（麦克风/媒体流）或context.createOscillator()（合成波形） - 每个节点通过
.connect()链式连接，例如：source.connect(filter).connect(gain).connect(context.destination)
实时混音：多路输入合并
混音本质是将多个音频信号在相同采样率下按权重相加。Web Audio 中使用 ChannelMergerNode 或直接多路 connect() 到同一目标节点实现。
- 若各路音轨需独立控制音量/声像，推荐分别连接到同一个
GainNode，再输出到destination；该GainNode可作为总控点 - 对立体声混音，可用
context.createStereoPanner()调节每路信号的左右声道分布 - 注意避免数字过载：混音前建议统一归一化或用
GainNode.gain.setValueAtTime(0.5)降低单路增益，防止 clipping
常用音效处理节点与技巧
Web Audio 内置多种处理器节点，可组合搭建效果链。所有参数均可动态自动化（automation），实现平滑过渡。
立即学习“前端免费学习笔记（深入）”；
-
均衡（EQ）：用
BiquadFilterNode，设置type = "lowshelf"/"peaking"/"highpass"等，配合frequency和Q精细调节频段 -
延迟与混响：简单延迟可用
DelayNode（最大延迟受maxDelayTime限制）；真实混响推荐ConvolverNode+ IR（脉冲响应）音频缓冲区 -
动态处理：Web Audio 原生不提供压缩器，但可通过 ScriptProcessorNode（已弃用）或更现代的
AudioWorklet实现自定义压缩/限幅逻辑 -
时间拉伸与变调：
BufferSourceNode的playbackRate属性可实时变速变调；若需保持音高仅变速，需结合 WebAssembly 实现 WSOLA 类算法
性能与兼容性注意事项
实时处理对 CPU 和内存较敏感，尤其在移动设备或多轨道场景下需主动优化。
- 避免频繁创建/销毁节点，复用已有节点并调用
.stop()/.start()控制播放 - 监听
audioContext.state，在suspended状态时（如页面切后台后恢复）需显式调用resume() - Chrome/Firefox 支持完整功能，Safari 对
AudioWorklet和部分滤波器类型支持有限，建议降级兜底（如禁用高级效果） - 调试可用
console.log(context.destination.channelCount)或浏览器 DevTools 的 Audio 面板查看节点连接状态
