网页背景音乐需通过按钮点击触发audio.play()，禁用autoplay；首次交互后可存localStorage状态，但移动端尤其iOS Safari限制严格，常需muted配合且无法后台播放。
用 <audio> 标签加按钮控制播放/暂停
网页背景音乐本质是自动加载但不自动播放的音频资源，靠 JavaScript 控制 play() 和 pause()。不能依赖 autoplay（现代浏览器普遍屏蔽），也不能用 document.write 或内联 javascript: 伪协议——既不健壮也不符合现代实践。
关键点：音频元素需设 muted 或在用户手势（如点击）后首次调用 play()，否则多数浏览器会静音或拒绝播放。
- 把
<audio>放在 HTML 底部或用preload="auto"提前加载，但不要加autoplay - 按钮绑定
click事件，首次点击触发play()；之后点击切换pause()/play() - 监听
ended事件可选是否循环，用loop = true更直接
<audio id="bgm" src="music.mp3" preload="auto" loop></audio>
<button id="toggleBgm">开启背景音乐</button>
<script>
const audio = document.getElementById('bgm');
const btn = document.getElementById('toggleBgm');
btn.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(e => console.warn('播放被阻止:', e));
btn.textContent = '关闭背景音乐';
} else {
audio.pause();
btn.textContent = '开启背景音乐';
}
});
</script>
play() 失败常见原因和绕过方式
Chrome、Safari 等会在没有用户交互上下文时拒绝 play()，报错类似 "DOMException: play() failed because the user didn't interact with the document first"。这不是代码写错了，而是浏览器策略。
- 确保按钮点击事件是直接触发
play()，不能包在setTimeout或异步回调里（会丢失交互上下文） - 如果页面加载后想“默认开启”，可在第一个用户点击（比如任意按钮、菜单、甚至
bodyclick）后调用一次play()并mute()，后续再取消静音 - 移动端尤其严格：部分 iOS Safari 要求音频必须有
muted才允许自动播放，哪怕之后立刻unmute—— 可以先audio.muted = true; audio.play(); audio.muted = false;尝试
如何记住用户上次的选择（开/关状态）
刷新页面后音频默认暂停，按钮文案也重置。用 localStorage 记住状态更合理，而不是每次重新请求音频资源。
立即学习“前端免费学习笔记（深入）”；
- 初始化时读取
localStorage.getItem('bgmEnabled')，为'true'则调用play()（注意仍需用户已交互过） - 每次开关都更新
localStorage.setItem('bgmEnabled', audio.paused ? 'false' : 'true') - 别存音频 URL 或二进制数据——只存布尔状态，避免冗余和过期问题
注意：即使存了状态，play() 仍可能失败。所以实际逻辑应是「恢复状态 + 尝试播放」，失败则保持暂停并提示用户手动点击一次。
移动端和 Safari 的特别注意事项
iOS Safari 对 <audio> 的控制比桌面端更死板：不支持 play() 在非用户手势中调用，且 volume 属性常被忽略，无法通过 JS 调节音量（只能靠系统侧边音量键）。另外，离开页面标签页后音频大概率被强制暂停，且无法后台恢复。
- 不要依赖
visibilitychange事件来 resume 音频——iOS 下无效 - 避免使用
audio.src = ...动态换曲，容易触发重新加载和权限重置；多个曲目建议用多个<audio>元素或 Web Audio API - 测试务必真机进行，模拟器行为可能与真实 Safari 不一致
最稳妥的做法是：接受“移动端背景音乐体验受限”这个事实，把功能降级为点击播放单曲，而非真正意义上的常驻背景音。
