现代浏览器禁止真正音频自动播放，唯一可靠方案是静音加载后用户首次交互时解除静音并同步播放；audio必须带muted和autoplay属性，且play()须在click/touchstart事件中同步调用。
现代浏览器根本不允许“真正意义”的音频自动播放——不是你代码写错了，而是 play() 被策略性拦截。唯一可靠路径是：先静音加载 + 用户首次交互后解除静音并播放。
audio 标签必须带 muted 和 autoplay 才能触发初始加载
不加 muted，autoplay 在绝大多数场景下会被浏览器直接忽略（控制台无报错，但无声、无状态变化）。这是硬性前提，不是可选项。
-
autoplay单独存在 ≈ 无效；必须搭配muted才可能触发底层解码和准备就绪 - 即使后续要取消静音，也得先让音频进入 “canplay” 或 “loadeddata” 状态，否则
play()会立刻 reject - 移动端 Safari 对
muted+autoplay的容忍度略低，建议额外加playsinline属性防全屏跳转
用户第一次点击必须同步调用 play()，不能包在异步逻辑里
浏览器只认“用户手势上下文中的同步执行”。任何延迟、Promise 链、setTimeout、fetch 回调里的 play() 都会失败，报错 NotAllowedError: play() can only be initiated by a user gesture。
- 正确写法：
btn.addEventListener('click', () => { audio.muted = false; audio.play(); }) - 错误写法：
btn.addEventListener('click', () => setTimeout(() => audio.play(), 0))或btn.addEventListener('click', async () => { await init(); audio.play(); }) - 移动端注意：iOS Safari 只响应
click或touchstart，且监听必须绑定到真实 DOM 元素（动态插入的按钮需手动 re-bind）
source 标签顺序和格式选择直接影响兼容性
不是所有浏览器都支持同一种编码。只提供 .mp3 在 Firefox 某些版本会静默失败；只提供 .ogg 在 iOS 上无法播放。必须组合提供。
- 优先顺序：
<source src="bgm.mp3" type="audio/mpeg"></source>放第一，<source src="bgm.ogg" type="audio/ogg"></source>放第二 - 避免使用
.wav：体积大、无压缩、加载慢，且部分 Android WebView 不支持 - 不要依赖 MIME 类型由服务器自动推断——务必显式写
type，否则 Chrome 可能拒绝加载
preload 和 loop 的实际作用常被高估
preload 控制的是资源加载时机，跟能否播放完全无关；loop 只在成功播放一次后才生效，若首次 play() 就失败，它压根没机会启动。
-
preload="metadata"是最实用的折中：秒出时长、不卡页面、不浪费带宽 -
preload="auto"对小音频（ -
loop可以放心加，但它不会帮你绕过自动播放限制——没播起来，循环就是空谈
最容易被忽略的一点：所有 play() 调用必须配 .catch()。不是为了“兜底”，而是因为失败是常态——用户没点、点了但网络卡、音频损坏、系统静音策略升级……这些都会导致 Promise reject，不捕获就会在控制台持续刷 warning，还可能阻塞后续逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
