必须用户点击后调用play()才能播放背景音乐，因现代浏览器默认拦截自动播放；audio标签需带controls属性和正确type的source，推荐MP3+OGG双格式回退。
单 HTML 文件里加背景音乐，不能靠 autoplay 一写就响——现代浏览器（Chrome/Firefox/Safari）默认拦截有声自动播放，必须用户点一下才能触发 play()；否则静音、报错、或干脆没反应。
audio 标签基础结构必须带 src 和 controls
不加 controls，音频就“不可见”：没按钮、没法点、JS 调用也常失败（尤其在 Safari 移动端）。最简可用结构是：
<audio id="bgm" controls><source src="bgm.mp3" type="audio/mpeg"><source src="bgm.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </source></source></audio>
-
src必须是相对路径（如"./audio/bgm.mp3"）或绝对 URL；直接写"bgm.mp3"或本地file://路径，在 Chrome/Firefox 下会 404 -
type属性不能省，也不能写错："audio/mp3"无效，必须是"audio/mpeg"（MP3）、"audio/ogg"（OGG） - 只放 MP3 会丢掉 Firefox 用户；建议双格式回退，浏览器按
为什么 autoplay + muted 不适合背景音乐
加 muted autoplay 确实能让部分浏览器“静音自动播”，但背景音乐的核心诉求是有声——你后续用 JS 解除静音（audio.muted = false）大概率仍失败，因为浏览器要求“首次播放调用”必须发生在用户手势上下文中，不是“先静音播、再取消静音”就能绕过。
- iOS Safari 最严：即使页面已交互，切 Tab 或锁屏后音频立刻中断，且 JS 无法恢复，必须用户重新点击
- Chrome 94+ 对“非用户驱动播放”的拦截更激进：哪怕之前点过按钮，后续异步调用（如
setTimeout(() => audio.play(), 100)）也会被拒 - 所以别赌
muted + autoplay，它只适合纯提示音、无声音效等场景
可靠播放必须绑定用户点击并处理 Promise 拒绝
唯一兼容性好、行为可预测的方式：监听一次真实点击（click 或 touchstart），在回调里直接调 audio.play()，并用 .catch() 捕获拒绝错误。
const audio = document.getElementById('bgm');
document.body.addEventListener('click', () => {
audio.play().catch(e => console.warn('播放被拒:', e));
}, { once: true });
- 必须用
{ once: true }，避免重复调用导致错误累积 - 不能放在
DOMContentLoaded或window.onload里，此时无用户手势，必失败 - 移动端注意：部分安卓浏览器对
click延迟敏感，可改用touchstart，但需确保监听对象可触达（比如不能监听document却让按钮在 iframe 里） - 如果想隐藏控件只留一个启动按钮，记得播放成功后手动
audio.controls = false，并移除按钮或设display: none
循环播放和音量控制得靠 JS 手动设
loop 属性虽存在，但 iOS Safari 在锁屏/切后台时会强制暂停，无法靠它维持连续播放；音量则完全无法用 HTML 属性控制，默认是系统音量级别。
- 循环逻辑建议用 JS 监听
ended事件：audio.addEventListener('ended', () => audio.currentTime = 0)，再audio.play() - 音量调节必须用
audio.volume = 0.7（范围 0–1），不能依赖浏览器控件——它在不同设备上行为不一致，尤其 iOS 上拖动后可能被重置 - 如果要实现“静音开关”，别用
muted切换（易失效），改用volume = 0/volume = 0.7配合状态变量管理
真正难的不是写几行代码，而是把“用户第一次点击”这个动作自然地融入页面动线里——比如按钮文案写成“开启心动时刻”，而不是冷冰冰的“播放音乐”；同时预留 fallback：若 play() 失败，至少显示一行小字提示“点击任意位置重试”。这些细节，决定对方是笑着点开，还是皱着眉关掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
