HTML音频标签如何在页面切到后台时暂停音乐播放

页面切到后台时audio不会自动暂停，需监听visibilitychange事件并校验readyState>1后调用pause()；多个audio可用querySelectorAll统一控制；切回前台不自动恢复播放，须由用户手势触发。

页面切到后台时，<audio> 标签不会自动暂停——这是常见误解。浏览器默认不干预播放行为，必须手动监听页面可见性变化并调用 pause()。

用 visibilitychange 事件监听页面是否失焦

这是 HTML5 标准方案，兼容所有主流浏览器（含 iOS Safari），比 blur/focus 更可靠，能捕获标签页切换、最小化、锁屏等场景。

1. 监听 document.addEventListener('visibilitychange', ...)
2. 在回调中检查 document.hidden === true，再执行暂停逻辑
3. 不要只监听一次，该事件会多次触发（如切走又切回）

示例代码：

const audio = document.getElementById('bgm');document.addEventListener('visibilitychange', () => {if (document.hidden && !audio.paused) {audio.pause();}});

暂停前先确认音频是否可操作

直接调 audio.pause() 可能静默失败或报错，尤其在音频尚未加载完成时。应加状态校验：

1. audio.readyState >= 2（表示已有当前帧数据，可安全操作）
2. audio.networkState !== 0（确保资源已开始加载）

稳妥写法：

if (document.hidden && audio.readyState > 1 && !audio.paused) {audio.pause();}

多个音频统一控制更简单

如果页面有背景音、音效、播客等多个 <audio>，别用 class 或 id 逐个找：

document.querySelectorAll('audio').forEach(a => {if (document.hidden && a.readyState > 1 && !a.paused) {a.pause();}});

切回前台时不自动恢复，由用户决定

不要在 visibilitychange 的 visible 分支里自动 play()。首次播放必须由用户手势触发（如点击按钮），否则会被浏览器拒绝。可做提示，或保留“继续播放”按钮。

不复杂但容易忽略