浏览器禁止自动播放音频是因用户手势激活策略，需用户点击后调用play()并捕获错误；隐藏audio、加按钮触发、设preload="metadata"、用.ogg格式减小体积可提升体验。
现代浏览器基本不让你页面一打开就自动响，autoplay 单独写在 <audio></audio> 标签里大概率静音或直接报错，这不是你代码写错了，是浏览器故意拦的。
为什么 autoplay 总是失败？
Chrome、Firefox、Safari 从 2018 年起统一执行「用户手势激活」策略：没用户点过、摸过页面，JS 就不能调 play()。哪怕加了 muted，也只在部分移动端勉强生效，但背景音乐没声音等于没放。
-
DOMException: play() failed because the user didn't interact with the document first是最常见报错 -
preload="auto"只影响下载时机，和能否播放无关 -
window.onload或DOMContentLoaded里直接play()必挂，此时还没任何用户交互
怎么让背景音频真正播起来？
唯一可靠路径：等用户点一下，再用 JS 调 play()，并捕获拒绝错误。
- 把
<audio></audio>写成隐藏状态：<audio id="bgm" preload="metadata"><source src="bgm.mp3" type="audio/mpeg"></source></audio> - 加个按钮（
<button id="playBtn">▶ 开启背景音乐</button>），绑定click事件 - 在事件回调里调
audio.play().catch(e => console.warn('播放被拒:', e)) - 移动端注意：用
touchstart或click，别用动态插入后才绑定的事件（比如 innerHTML 加的按钮）
循环播放 + 静音开关怎么加？
loop 属性能循环，但音量、静音、暂停/继续都得靠 JS 手动控制，浏览器不提供一键后台开关。
- 开启循环：
audio.loop = true（比写loop="loop"更可控） - 静音切换：
audio.muted = !audio.muted - 音量调节：
audio.volume = 0.3（范围 0–1，别设 0 或 1 以外的值，有些浏览器会 clamp） - 想“后台播放”？没有真正的后台——标签页切走或浏览器最小化时，多数浏览器会暂停音频
最容易被忽略的一点：音频文件本身要小。MP3 压到 128kbps 以下，优先用 .ogg（体积更小、解码更快），否则用户点完按钮还要等好几秒才出声，体验直接掉档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
