HTML音频play()返回Promise，需用catch捕获静音策略拒绝，错误类型为NotAllowedError；应检查e.name或message判断是否因无用户交互导致，并提供点击引导、静音自动播放等降级方案。
HTML音频标签遇到浏览器静音策略时，不会抛出传统同步错误，而是让play()返回一个被拒绝的 Promise，必须用 catch 捕获，不能靠 try/catch 包裹。
监听 play() 的 Promise 拒绝
调用 audio.play() 后，它返回 Promise。若因未交互被拦截，Promise 会 reject 并带 DOMException: play() failed because the user didn't interact with the document first 类型错误。
- 必须写成
audio.play().catch(e => { console.error("播放失败:", e); }) - 不要写
try { audio.play(); } catch(e) { ... }—— 这捕不到异步拒绝 - 常见误写：
if (audio.play()) { ... }——play()总是返回 Promise，永远不为 false
区分策略拦截和其他失败原因
同一个 catch 块里需判断错误类型，避免把网络加载失败、格式不支持等误判为“没交互”。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 检查
e.name === "NotAllowedError"或e.message.includes("user didn't interact")，才是策略拦截 - 若
e.name === "AbortError"，可能是资源中断；e.name === "NotSupportedError"则是格式问题 - 可配合
audio.networkState和audio.readyState辅助诊断：比如readyState === 0表示根本没加载元数据
捕获后提供降级或引导方案
不能只打印错误，要给用户明确反馈和可行路径。
- 显示提示文字：“请先点击页面任意位置，再试播放”
- 自动启用静音自动播放作为后备：
audio.muted = true; audio.autoplay = true;（需在 DOM 中已声明muted才可靠） - 为按钮添加
disabled状态并恢复：失败后设button.disabled = false，避免重复点击无响应
移动端 Safari 的特殊捕获要点
iOS Safari 可能连 play() 的 Promise 都不返回（尤其未触发过媒体权限时），需加兜底检测。
- 在
click后立即检查audio.paused：若仍为true，大概率被拦截 - 监听
timeupdate或playing事件是否触发，超时未触发即视为失败 - 对首次交互，可先调一次空
audio.play()（不关心成功与否），只为“解锁”后续操作权限
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
