HTML音频标签如何处理浏览器静音策略的异常捕获

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 类型错误。

1. 必须写成 audio.play().catch(e => { console.error("播放失败:", e); })
2. 不要写 try { audio.play(); } catch(e) { ... } —— 这捕不到异步拒绝
3. 常见误写：if (audio.play()) { ... } —— play() 总是返回 Promise，永远不为 false

区分策略拦截和其他失败原因

同一个 catch 块里需判断错误类型，避免把网络加载失败、格式不支持等误判为“没交互”。

1. 检查 e.name === "NotAllowedError" 或 e.message.includes("user didn't interact")，才是策略拦截
2. 若 e.name === "AbortError"，可能是资源中断；e.name === "NotSupportedError" 则是格式问题
3. 可配合 audio.networkState 和 audio.readyState 辅助诊断：比如 readyState === 0 表示根本没加载元数据

捕获后提供降级或引导方案

不能只打印错误，要给用户明确反馈和可行路径。

1. 显示提示文字：“请先点击页面任意位置，再试播放”
2. 自动启用静音自动播放作为后备：audio.muted = true; audio.autoplay = true;（需在 DOM 中已声明 muted 才可靠）
3. 为按钮添加 disabled 状态并恢复：失败后设 button.disabled = false，避免重复点击无响应

移动端 Safari 的特殊捕获要点

iOS Safari 可能连 play() 的 Promise 都不返回（尤其未触发过媒体权限时），需加兜底检测。

1. 在 click 后立即检查 audio.paused：若仍为 true，大概率被拦截
2. 监听 timeupdate 或 playing 事件是否触发，超时未触发即视为失败
3. 对首次交互，可先调一次空 audio.play()（不关心成功与否），只为“解锁”后续操作权限