audio元素无后台暂停功能，需用javascript监听visibilitychange事件，在document.hidden为true时调用pause()，返回可见时按需调用play()；首次播放须由用户手势触发，否则被浏览器阻止。
audio 元素默认不支持后台暂停，得靠 JavaScript 控制
HTML 的 <audio></audio> 标签本身没有“后台暂停”这个行为——它只管播放/暂停，是否继续运行取决于浏览器策略和页面可见性。所谓“后台暂停”，其实是监听页面失焦或标签页隐藏时，主动调用 pause()；切回时再决定是否恢复。这不是属性开关，而是需要手动干预的逻辑。
监听页面可见性变化用 document.hidden + visibilitychange 事件
现代浏览器通过 document.hidden 判断当前标签页是否被隐藏（比如切换到其他 Tab、最小化窗口），配合 visibilitychange 事件触发时机最准。注意：不是所有“失焦”都等于隐藏（比如弹出 DevTools 不会触发 hidden），所以别用 blur 或 focusout 替代。
实操建议：
- 在
<audio></audio>加上id="bgm"方便获取 DOM - 用
document.addEventListener('visibilitychange', ...)监听 - 进入隐藏状态时调用
document.getElementById('bgm').pause() - 返回可见时，按需决定是否
play()（比如用户没手动暂停过，就续播）
示例片段：
const audio = document.getElementById('bgm');
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
audio.pause();
} else if (!audio.paused && audio.currentTime > 0) {
// 可选：仅当之前在播且没被用户暂停，才自动续播
audio.play().catch(e => console.log('auto-play blocked:', e));
}
});
autoplay 和 play() 被阻止是常见报错点
Chrome 等浏览器强制要求音频必须由用户手势（如 click、touchstart）触发首次 play()，否则抛出 DOMException: play() failed because the user didn't interact with the document first。这意味着：autoplay 属性基本失效，后台切回来时的自动续播也大概率失败。
解决思路：
- 首次播放必须绑定到用户操作（比如一个「播放」按钮的
onclick） - 后续暂停/恢复可用 JS 控制，但恢复前要确保上下文仍是“可播放状态”
- 如果想静音自动播（绕过策略），可加
muted属性，但对背景音乐意义不大
移动端 Safari 对 visibilitychange 支持有限，需降级处理
iOS Safari 在某些版本中不会触发 visibilitychange（尤其 App 内嵌 WebView 或锁屏后）。这时候得加一层兜底：监听 pagehide / pageshow，它们在页面被缓存或离开时更可靠。
补充建议：
- 同时监听
visibilitychange和pagehide，两者都调用pause() -
pageshow不保证页面是活跃的，所以恢复播放仍要结合document.visibilityState === 'visible'判断 - 避免依赖
beforeunload，它在 iOS 上不触发音频控制，且已被部分浏览器弃用
容易被忽略的是：音频元素的 preload 属性设为 "auto" 会在页面加载时预加载全部资源，可能拖慢首屏；设为 "metadata" 更合理，尤其对长音频。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
