最稳定节能策略是监听visibilitychange事件并统一暂停audio：检查document.hidden为true时遍历所有audio元素，仅对readyState>1的调用pause；同时兜底pagehide和blur；恢复播放不自动触发，需用户手势授权。
页面切到后台或锁屏时，audio 不会自动暂停，必须手动监听可见性变化并统一控制——这是最稳定、兼容性最好的节能策略。
用 visibilitychange 监听页面是否“失焦”
别用 blur 或 focus，它们对多标签切换、锁屏、弹窗遮挡等场景响应不全。应使用 HTML5 标准的 Page Visibility API：
- 监听 document.addEventListener('visibilitychange', handler)，它在 Chrome/Firefox/Safari/Edge（含 iOS Safari）都可靠
- 触发时检查 document.hidden === true，表示页面已不可见（切走、锁屏、新窗口覆盖等）
- 这个事件只通知“状态变了”，不带当前值，所以每次触发都要重新读 document.hidden
遍历所有 audio 元素并安全暂停
一个页面可能有多个音频源（背景音、音效、播客），不能靠 class 或 id 手动管理，要全局统一处理：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用 document.querySelectorAll('audio') 获取全部 audio 节点（返回 NodeList，现代浏览器支持 forEach）
- 对每个 audio，先判断 audio.readyState > 1（即至少已加载当前播放所需数据），再调用 pause()
- 避免在 loadstart 前就执行 pause —— 此时 readyState 可能为 0，调用无效甚至报错
补充兜底：兼容 pagehide 和 blur
visibilitychange 是主方案，但部分老环境或特殊中断（如安卓 PWA 突然被系统杀掉）仍需冗余保护：
- 同时监听 pagehide（页面即将卸载/隐藏）和 blur（窗口失去焦点）
- 在这些事件里也执行同样的遍历 + readyState 判断 + pause 逻辑
- 注意：iOS Safari 对未获用户手势授权的 audio 实例限制极严，readyState 可能长期卡在 0；确保首次 play() 是由点击等用户操作触发
恢复播放不需要自动做
页面回到前台时，不建议自动 resume 播放：
- 用户可能并不想继续听，自动播放反而干扰体验
- 若确有需求（如音乐类应用），应在 visibilitychange 中检测 document.hidden === false 后，仅对之前正在播放的 audio 尝试 play()，并用 .catch() 捕获拒绝
- 移动端尤其注意：若之前是静音播放，恢复时可考虑先 muted = true 再 play，成功后再设回 muted = false
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
