现代浏览器禁用无交互音频自动播放是策略而非bug，因Chrome 66+等强制要求用户点击、触摸等显式交互才能调用play()，否则抛出NotAllowedError；静音视频可绕过，但纯audio即使muted也不行；iOS Safari更严格，需首次点击触发后才允许后续播放。
现代浏览器基本都禁用了无用户交互前提下的 audio 自动播放，这不是 bug，而是策略——直接调 play() 会抛出 NotAllowedError: play() failed because the user didn't interact with the document first。
为什么 audio.play() 突然不工作了
Chrome 66+、Firefox 70+、Safari 11+ 全部默认启用“媒体自动播放策略”，核心规则是：只有在用户显式交互（如点击、触摸、键盘输入）触发的上下文中，才允许调用 play()。页面加载、setTimeout、DOMContentLoaded 都不算。
- 即使设置了
autoplay属性，浏览器也会忽略（<audio autoplay>等同于没写） -
muted属性可绕过部分限制（尤其 Chrome），但仅对视频有效；纯audio即使静音也无法自动播放 - iOS Safari 更严格：连
muted+video都必须用户点击后首次触发才能后续自动播
如何在用户点击后可靠触发音频播放
最稳妥的做法是把 play() 绑定到一次真实的用户手势事件中，并确保该事件处理器未被异步延迟劫持。
- 用
addEventListener('click', ...)直接绑定按钮，不要包裹在setTimeout(() => play(), 0)或 Promise 回调里 - 避免在
click处理器中做异步等待（比如先 fetch 音频再 play）——必须在事件同步阶段调用play() - 推荐模式：预加载音频（
preload="auto"或提前audio.load()），点击时立即audio.play()
<button id="playBtn">播放音效</button>
<audio id="beep" src="/beep.mp3" preload="auto"></audio>
<script>
const audio = document.getElementById('beep');
const btn = document.getElementById('playBtn');
btn.addEventListener('click', () => {
audio.play().catch(e => console.warn('播放失败:', e));
});
</script>
需要“无点击启动”怎么办：折中方案与边界情况
如果产品逻辑确实要求无交互启动（如 Web 游戏开场音效、仪表盘告警提示），只能接受降级或引导：
立即学习“前端免费学习笔记（深入）”；
- 首屏加一个轻量级引导按钮（如“启用声音”），点击后存储
localStorage标记，并在后续页面自动调用play() - 使用
AudioContext合成简单音效（如 beep）——它不受自动播放策略限制，但无法播放外部音频文件 - 对 iOS 用户，可检测
document.hasFocus()和audio.readyState，在用户切回页面时尝试play()（成功率低，仅作补充）
容易被忽略的细节：preload、loop 和 promise 状态
play() 返回 Promise，但它的 resolve/reject 并不表示音频是否真正在播放，只代表播放请求是否被接受。很多开发者误以为 catch 住就等于失败，其实有时只是延迟触发。
-
preload="none"会导致点击后明显卡顿，建议设为"metadata"或"auto" -
loop不影响自动播放策略，但若首次play()失败，后续loop也不会生效 - 调用
play()前检查audio.networkState === HTMLMediaElement.NETWORK_LOADED可提升成功率
真正麻烦的不是写几行代码，而是不同浏览器对“用户交互”的定义差异很大——比如 Safari 认为 iframe 内的点击不算主文档交互，而 Chrome 可能接受。上线前务必在 iOS Safari、Chrome Android、桌面 Edge 上实测点击路径。
