现代浏览器禁止无用户交互的音频自动播放，需监听首次点击后调用play()并取消静音；仅支持标签，和已废弃；ios safari要求play()必须在手势回调内同步执行。
HTML 里用 <audio></audio> 标签插入背景音乐，但“自动播放 + 静音”是现代浏览器的硬性限制，不加用户交互就播不了。
为什么 autoplay 大概率失效
Chrome、Firefox、Safari 等主流浏览器从 2018 年起默认禁止无用户手势（比如点击）触发的音频自动播放，尤其带声音的 autoplay。即使写了 autoplay 和 loop，也常被静音或直接拦截。
- 错误现象：
<audio autoplay src="bgm.mp3"></audio>页面一打开没声音，控制台可能报DOMException: play() failed because the user didn't interact with the document first - 根本原因：防打扰策略，不是 bug，是规范行为
- 绕过方式？不行。除非用户先点过页面任意位置（哪怕只是空 div），之后再调用
play()才可能成功
怎么让背景音乐“看起来”自动播放
核心思路：等用户首次交互后，立刻播放；同时默认设为 muted，绕过静音限制，再尝试取消静音（部分浏览器允许）。
- HTML 中写：
<audio id="bgm" src="bgm.mp3" muted loop></audio> - JS 监听第一次点击/触摸：
document.addEventListener('click', playBgm, { once: true }) - 播放函数里先
audio.play()，再立即audio.muted = false（注意：这个操作在部分 iOS Safari 上仍会被拒绝） - 别依赖
load或canplay事件来触发播放——它们不等于用户授权
<embed></embed> 和 <bgsound></bgsound> 还能用吗
不能。这两个是 IE 时代的遗留标签，<embed></embed> 行为不可控、无标准 API；<bgsound></bgsound> 已被所有现代浏览器彻底废弃，连解析都不做了。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<bgsound src="bgm.wav" loop="infinite"></bgsound>—— 页面里完全没效果 - 兼容性陷阱：哪怕在旧版 Edge 里，
<embed></embed>也常被拦截或无法监听播放状态 - 结论：只用
<audio></audio>，它是唯一被规范支持、可编程控制的方案
移动端特别要注意什么
iOS Safari 对音频控制最严格：即使用户点过屏幕，首次 play() 也必须发生在用户手势回调内，且不能异步延迟（比如 setTimeout 后再 play）。
- 有效写法：
button.addEventListener('touchstart', () => audio.play()) - 无效写法：
button.addEventListener('click', () => setTimeout(() => audio.play(), 100)) - 音频格式优先选
.mp3或.m4a，避免.wav（体积大、加载慢、iOS 解码易失败） - 别在
pagehide或visibilitychange里强行 pause —— 用户切后台时浏览器可能已暂停音频，再 resume 容易失败
真正的难点不在代码怎么写，而在于接受“浏览器不让你随便放声音”这个前提；所有绕过尝试，本质都是等用户点头同意——哪怕只是点了一下空白处。
