audiocontext 应全局复用而非每次创建，首次用户交互时调用 resume() 解除静音；复用 gainnode、biquadfilternode 等处理器节点，buffersourcenode 虽一次性但上游链可复用；htmlmediaelement 源节点亦可复用，仅需更新 src 并 load()。
AudioContext 初始化是一次性且代价较高的操作，不能也不该在每次播放或交互时重复创建。复用音频节点和上下文，是提升响应速度、规避浏览器静音策略、保障多轨道稳定运行的基础。
全局复用 AudioContext 实例
浏览器对 AudioContext 的创建有严格限制：iOS Safari 等平台会拒绝非用户手势触发的上下文启动；Chrome 要求首次 resume() 必须由 click/touch 等交互触发。反复 new AudioContext() 不仅可能失败，还会造成资源泄漏和状态混乱。
- 页面加载时统一初始化：
const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); - 避免在按钮事件、动画帧或音频回调中调用
new AudioContext() - 首次用户交互（如点击）时主动调用
audioCtx.resume()解除静音锁定
按需复用 AudioNode 而非重复新建
GainNode、BiquadFilterNode、DelayNode 等处理器节点可长期存在并复用，无需每次音效都重建。BufferSourceNode 是一次性节点（播放后自动断开），但它的上游处理链（如 filter → gain）完全可以复用。
- 为常用效果预建节点：例如一个通用的
masterGain = audioCtx.createGain()作为总输出控制 - 每个音轨配专属 GainNode，但这些 GainNode 可持续连接，仅动态调节
gain.value或自动化参数 - 用
node.disconnect()清理旧连接，而非销毁节点；下次使用再connect()
媒体源节点的复用技巧
HTMLMediaElement（如 <audio></audio>）接入 Web Audio 时，createMediaElementSource() 返回的源节点与元素强绑定。只要元素未销毁或重载，该源节点就可反复用于不同处理链。
- 一个
<audio id="bgm"></audio>可同时连接到均衡器、混响、主增益等多条路径 - 切换播放源时，只需修改
audio.src并调用audio.load()，无需重建 MediaElementSourceNode - 注意：若元素被移出 DOM 或
src设为空，原源节点将失效，需重新创建
复用带来的实际收益
节点复用不只是写法优化，它直接关系到延迟表现与稳定性：
- 避免 iOS 上因多次 resume() 失败导致全程无声
- 减少 GC 压力，防止长时运行页面出现卡顿或音效中断
- 支持毫秒级音效响应（如按钮“咔哒”声），因 Oscillator + GainNode 链已就绪，点击即发
- 混音场景下，所有音轨共享同一 context，天然保持采样同步，无相位偏移风险
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
