网页切到后台时自动暂停背景音乐，核心是监听visibilitychange事件并结合userActivated标记控制播放；需首次用户交互授权后才允许切回前台时恢复播放，iOS Safari还需额外处理静音与焦点判断。
网页切到后台时自动暂停背景音乐，核心是监听浏览器的页面可见性变化，而不是依赖定时器或播放状态轮询。现代浏览器提供了 visibilitychange 事件，能精准捕获用户切换标签页、最小化窗口等行为，是唯一可靠且低开销的方式。
监听 visibilitychange 事件
当页面从可见变为不可见（如切到其他标签页），document.hidden 变为 true；恢复可见时变回 false。利用这个信号控制音频即可：
- 在页面加载后立即监听
visibilitychange，无需等待用户交互 - 事件触发时检查
document.hidden状态，决定调用pause()还是play() - 注意：
play()在切回前台时仍需满足用户激活上下文（即之前已有点击/滚动等交互），否则可能失败——所以建议只在已获得播放权限后才尝试恢复播放
结合用户交互状态做安全控制
单纯监听 visibilitychange 不足以保证切回时能继续播放，因为浏览器会拒绝无用户手势的 play() 调用。需配合一个“已获授权”标记：
- 首次用户点击、触摸或滚动后，设
let userActivated = true - 切后台时无条件
audio.pause() - 切回前台时，仅当
userActivated为true才尝试audio.play()，并用catch处理失败
移动端 iOS Safari 的额外注意
iOS Safari 对后台音频控制更严格，即使监听了 visibilitychange，也可能因系统级限制无法恢复播放：
- 不建议强求切回时自动恢复声音，优先保障切后台必停，避免声音持续外放干扰用户
- 可加一层判断：
if (document.hasFocus() && !document.hidden)，双重确认页面真正处于前台活跃状态 - 若音频已暂停超过数秒，切回时直接静音播放（
audio.muted = true）再等用户点击取消静音，比强行恢复更稳妥
完整示例代码结构
将以下逻辑放入脚本中，无需修改 HTML 的 audio 标签本身：
- JS 中获取元素：
const audio = document.getElementById('bgm'); - 绑定交互标记：
['click', 'touchstart', 'scroll'].forEach(e => document.addEventListener(e, () => { userActivated = true; }, { once: true })); - 监听可见性：
document.addEventListener('visibilitychange', () => { if (document.hidden) audio.pause(); else if (userActivated) audio.play().catch(() => {}); });
