chrome 77+等现代浏览器默认禁止有声自动播放，需用户首次交互（如点击）后才能播放；加muted可静音自动播放，再取消静音；web audio api通过audiocontext.resume()解锁更灵活的音频控制。
Chrome 浏览器里 audio 自动播放被静音拦截了
现代浏览器（尤其是 Chrome 77+）默认禁止所有带声音的自动播放，哪怕你写了 autoplay，只要没用户交互（比如点击、触摸），音频就卡在“等待用户手势”状态。这不是 bug，是策略——防骚扰、省流量、保隐私。
常见现象：audio.play() 报错 domException: play() failed because the user didn't interact with the document first；或者没报错但毫无声音，audio.paused 仍为 true，audio.readyState 停在 0 或 1。
- 必须等用户首次交互（任意点击、按键、触摸）后再调用
play()，哪怕只是点空白区域 - 不能在
DOMContentLoaded或load事件里直接播；可以绑定到click后再触发播放逻辑 - 如果想“假装自动”，可在页面加载后显示一个轻量引导按钮（如「开始」），用户点一下就解禁后续所有
play() -
muted属性是关键突破口：加了muted的audio允许静音自动播放，之后再调用setVolume(1)并unmute—— 但注意 safari 对unmute仍可能拒绝
firefox 和 Safari 对 autoplay 的处理差异
Firefox 相对宽松：只要媒体无声音（muted）或用户已允许该站点自动播放（通过地址栏小图标设置），就能播；但一旦有声音且未授权，同样拦截。
Safari 更严格：ios 上几乎完全禁止任何自动播放（包括 muted），macos 则依赖用户偏好设置（Safari → 设置 → 网站 → 自动播放）。它还会主动暂停已播放的 audio，如果页面切到后台超过几秒。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
autoplay属性本身生效，它只是提示，不是指令 - 检测是否能播：监听
audio.oncanplay后立即play()，并用.catch(e => console.warn("play blocked:", e))捕获失败 - 移动端优先考虑用 Web Audio API +
AudioContext，它对“用户手势”的判定更灵活（首次resume()即解锁）
用 AudioContext 绕过部分自动播放限制
Web Audio API 不走 html audio 标签那一套，它的 AudioContext 必须由用户手势触发 resume()，但一旦 resume，后续所有音频节点（OscillatorNode、BufferSourceNode）都能自由播放，且支持精确控制。
适合场景：需要合成音效、节拍器、游戏音效、或对延迟敏感的播放（比如和 canvas 动画同步）。
- 初始化时不要 new
AudioContext，而是等用户点击后调用new (window.AudioContext || window.webkitAudioContext)()再.resume() - 加载音频文件用
fetch()+arrayBuffer+decodeAudioData()，避免audio.src加载阶段的不确定性 - 注意：iOS Safari 中
AudioContext在页面后台时仍会被挂起，唤醒需再次手势
audio 标签里 preload 和 controls 的实际影响
preload 只是提示，不是保证。设成 "auto" 在移动网络下常被浏览器忽略；设成 "metadata" 是最稳妥的折中——只加载头信息（时长、尺寸），不拉音频数据，既快又省流。
controls 开启后，原生控件里的播放按钮自带用户手势上下文，点它能成功触发播放；但 js 调用 play() 仍受制于前述规则。
- 别把
preload="auto"当自动播放开关，它和autoplay无关 - 如果用自定义 ui，确保第一个播放操作绑定在真实 DOM 事件上（
button.addEventListener("click", ...)），而不是 setTimeout 或 promise.then - 调试时用 chrome devtools → Application → Permissions → Autoplay 查看当前站点策略
最麻烦的其实是 iOS Safari：它不暴露任何明确错误，play() 静默失败，onerror 不触发，networkState 和 readyState 也看不出异常。这时候只能靠 setTimeout 后检查 audio.ended 或 audio.currentTime > 0 来间接判断是否真播起来了。