Web Audio API 专用于需精确控制、分析或修改音频的场景，而适用于简单播放；AudioContext需兼容处理、用户交互后创建并resume；decodeAudioData只接受ArrayBuffer；start()基于audioContext.currentTime且节点不可重用；输出链路须经GainNode等中间节点管理。
Web Audio API 不是 <audio></audio> 的替代品，而是处理“需要精确控制、分析或修改音频数据”的场景的唯一可行路径。如果你只是想播一段提示音或背景音乐，<audio></audio> 更轻量、更稳定；一旦涉及声道操作、实时频谱、剪辑混音、淡入淡出或低延迟调度，就必须用 Web Audio API。
AudioContext 创建与兼容性处理
所有 Web Audio 操作都始于 AudioContext，但它在旧版 Safari 和部分 Android WebView 中需前缀，且不能跨 iframe 或非安全上下文（HTTP）启动。
- 必须在用户交互（如 click/touchstart）后首次创建，否则 iOS Safari 会静音或拒绝初始化
- 避免重复创建：全局复用一个实例，多次调用
new AudioContext()会导致资源泄漏和时序错乱 - 兼容写法应为：
const audioContext = new (window.AudioContext || window.webkitAudioContext)(); - 创建后立即检查状态：
if (audioContext.state === 'suspended') audioContext.resume();—— 这是 iOS 和 Chrome 70+ 后强制要求的“唤醒”步骤
加载与解码音频：fetch + decodeAudioData 的正确顺序
decodeAudioData() 是异步的，且只接受 ArrayBuffer；直接传 Blob 或 URL 会报错 Failed to execute 'decodeAudioData' on 'BaseAudioContext': parameter 1 is not of type 'ArrayBuffer'。
- 必须用
fetch(url).then(r => r.arrayBuffer())获取原始二进制，再传给decodeAudioData() - 不要在
load事件里调用它——<audio></audio>的load不代表解码就绪，那是媒体元素的加载逻辑，和 Web Audio 无关 - 跨域资源必须加
crossorigin="anonymous"到<audio></audio>标签，或 fetch 时设{ mode: 'cors' }，否则解码失败且无明确错误提示 - 大文件解码可能阻塞主线程，可考虑用
OfflineAudioContext在后台预处理，或拆分帧做渐进式解码
播放控制：start() vs play()，时间精度陷阱
Web Audio 的播放触发点是 AudioBufferSourceNode.start(when)，不是 play()；后者属于 <audio></audio> 元素，混用会失效。
立即学习“前端免费学习笔记（深入）”；
-
start()的when参数单位是秒，基准是audioContext.currentTime，不是系统时间 - 若传
0，表示“立刻”，但实际有微小延迟（通常 1–10ms），对节拍敏感应用需补偿 - 已 start 的节点不能重复 start，需新建节点；误调用会抛
InvalidStateError - 暂停/恢复不能靠
sourceNode.stop()+start()模拟——stop 后节点即销毁，必须重建；真暂停要用GainNode.gain.value = 0静音，再恢复增益
音频输出链路：为什么不能直接 connect 到 destination？
直接把 AudioBufferSourceNode 连到 audioContext.destination 虽能响，但失去调节能力、无法复用、难以调试。真实项目中必须插入中间节点。
- 至少加一层
GainNode控音量，否则后续无法动态调整响度 - 要做声道分离或合并，必须先用
ChannelSplitterNode/ChannelMergerNode显式拆解通道布局 - 监听频谱要用
AnalyserNode，且必须放在 chain 中间位置（如 source → analyser → gain → destination），否则拿不到数据 - 多个源共用 destination 时，务必统一采样率（
buffer.sampleRate === audioContext.sampleRate），否则出现变调或爆音
真正容易被忽略的，是节点连接后的“生命周期管理”：每个 AudioBufferSourceNode 只能 start 一次，stop 后不可重用；大量短音频频繁创建/连接/断开，不手动 disconnect() 并丢弃引用，很快就会触发内存警告或音频卡顿。这不是理论风险，是 Safari 和低端 Android 设备上的高频问题。
