Web Audio API 与 <audio> 标签需分场景协同使用：简单播放用 <audio>，精确控制/分析必须用 Web Audio；iOS Safari 需用户交互后创建 AudioContext 并 resume()；HTTP 环境下 AudioContext 被禁用；decodeAudioData 仅接受 ArrayBuffer；AudioBufferSourceNode 须每次新建；createMediaElementSource() 是官方推荐桥接方式，但需同步状态。
Web Audio API 和 <audio> 标签的兼容性问题不是“选一个就能避坑”，而是必须按场景分层处理：简单播放用 <audio>，精确控制或分析必须用 Web Audio，但两者在旧浏览器、iOS Safari、非安全上下文（HTTP）中都会掉链子。关键不是绕开，而是明确每个环节的 fallback 路径和触发条件。
AudioContext 创建失败：iOS Safari 拒绝初始化或 state 为 suspended
这是最常被忽略的阻断点——哪怕代码逻辑完全正确，new AudioContext() 在 iOS Safari 或 Chrome 70+ 后首次调用时默认处于 suspended 状态，直接调用 start() 会静音或报错。
- 必须在用户交互（
click、touchstart）回调中首次创建，不能在页面加载时立即执行 - 创建后立刻检查：
if (audioContext.state === 'suspended') audioContext.resume()，否则后续所有节点连接和start()都无效 - 兼容写法必须带前缀：
const AudioContext = window.AudioContext || window.webkitAudioContext，Safari 12.1 之前不支持无前缀版本 - 非 HTTPS 页面（HTTP）下，Chrome 与 Safari 会彻底禁用
AudioContext，连构造函数都抛ReferenceError，无法降级——必须强制走 HTTPS
decodeAudioData 报错 “parameter 1 is not of type 'ArrayBuffer'”
这个错误几乎 100% 是因为把 Blob 或 URL 直接传给了 decodeAudioData()。它只认原始二进制数据，且必须是 ArrayBuffer 类型。
- 正确流程是：
fetch(url).then(r => r.arrayBuffer()).then(buffer => audioContext.decodeAudioData(buffer)) - 不能用
XMLHttpRequest.responseType = 'arraybuffer'后直接传xhr.response——需确保xhr.response确实是 ArrayBuffer（某些老安卓 WebView 会返回string） - 跨域音频资源必须加
crossorigin="anonymous"到<audio>标签，或 fetch 时显式设置{ mode: 'cors' }，否则解码失败但无明确报错，仅静默失败 - 大文件（>20MB）解码可能卡住主线程，可改用
OfflineAudioContext预处理，或用createMediaElementSource()绕过解码（牺牲精度换可用性）
AudioBufferSourceNode.start() 报 InvalidStateError
这个错误不是参数写错，而是节点生命周期管理出错：Web Audio 节点是一次性的，start() 后不能再调用 start()，也不能复用已 start 的节点。
立即学习“前端免费学习笔记（深入）”；
- 每次播放都要新建
AudioBufferSourceNode：const source = audioContext.createBufferSource()，不能缓存后反复调用source.start() -
start(when)的when必须 ≥audioContext.currentTime，传负数或过期时间直接抛InvalidStateError - 如果想重复播放同一段音频，不要重用节点，而应复制
audioBuffer并新建 source；或用loop = true+stop()控制区间 - 注意 iOS Safari 对
start(when)的调度精度较差，when偏差可能达 50ms，节拍类应用需用audioContext.currentTime动态计算补偿值
如何让 <audio> 和 Web Audio 协同工作
很多项目误以为二者互斥，其实 createMediaElementSource() 是官方推荐的桥接方式——用 <audio> 负责加载和缓冲，Web Audio 负责实时处理，兼顾兼容性与能力。
- 先创建
<audio src="xxx.mp3" crossorigin="anonymous">，确保能正常play() - 再用
const source = audioContext.createMediaElementSource(audioElement)将其接入 Web Audio 图 - 此时
audioElement.play()触发播放，但音量、滤波等全由后续GainNode、BiquadFilterNode控制 - 注意：该方式下
audioElement的volume属性失效，必须用GainNode.gain.value控制 - IE11 及更早版本不支持
createMediaElementSource()，需检测并 fallback 到纯<audio>方案
真正难处理的不是语法或 API 调用，而是状态同步：比如用户点击暂停按钮时，你要同时调用 audioElement.pause() 和 gainNode.gain.setValueAtTime(0, audioContext.currentTime)，否则 UI 状态和实际音频流会脱节。这种细节没有文档强调，但线上问题八成出在这儿。
