必须在用户点击、触摸或按键等可信交互事件的同步回调中调用audio.play()，不可延迟或异步触发；错误做法包括在DOMContentLoaded、onload或setTimeout中调用，正确方案是绑定click等事件并在其顶层直接执行play()并加.catch()捕获异常。
audio.play() 报 DOMException: play() failed because the user didn't interact with the document first 怎么办
这不是代码写错了，是浏览器强制策略——所有现代浏览器（Chrome 120+、Firefox 125+、Safari 17+、Edge 120+）都要求首次 play() 必须发生在用户手势（click、touchstart、keydown）的同步执行上下文中。
常见错误包括：
- 在
DOMContentLoaded或window.onload里直接调play() - 用
setTimeout(() => audio.play(), 0)或Promise.resolve().then(() => audio.play())延迟触发 - 按钮绑了事件，但
play()被包在异步逻辑（如 fetch 后）里
正确做法：
- 把
play()放在事件回调最顶层，不嵌套异步链 - 哪怕只是“唤醒”媒体上下文，也建议用一个空
Audio实例立即play()再pause() - 示例：
document.querySelector('#start-btn').addEventListener('click', () => { const dummy = new Audio(); dummy.play().catch(() => {}); // 忽略失败，只为解锁 });
移动端 iOS Safari 和微信内置浏览器录音权限怎么拿
iOS Safari 对权限更苛刻：不仅要求用户点击，还要求触发元素在视口内、未被 display: none 或 opacity: 0 遮挡，否则即使点了也静音或拒绝。
立即学习“前端免费学习笔记（深入）”；
微信 iOS 客户端（基于 WKWebView）沿用 Safari 策略，且不支持 getUserMedia 在非 HTTPS 页面调用——哪怕 localhost 也不行，必须真实 HTTPS。
关键检查点：
- 页面必须通过 HTTPS 提供（
http://localhost可行，file://绝对不行） - 按钮需有明确视觉反馈（不能是透明层、伪元素覆盖）
- 调用
navigator.mediaDevices.getUserMedia({ audio: true })前，先检查navigator.mediaDevices是否存在 - 不要在页面加载时自动请求，必须等用户点击“启用麦克风”类按钮后才调
audio 标签 fallback 失效，报 MEDIA_ERR_SRC_NOT_SUPPORTED（code: 4）
这个错误不是路径错，而是浏览器试完所有 <source> 都找不到能解码的格式。根本原因通常是 MIME 类型声明错误或服务器没配对响应头。
典型坑点：
-
type="audio/mp3"是无效值，必须写type="audio/mpeg" - Ogg 文件用了 Opus 编码（
audio/ogg; codecs=opus），但旧版 Firefox 或 Safari 不认，应改用 Vorbis（audio/ogg; codecs=vorbis） - 本地开发用双击打开 HTML，
file://协议下 Chrome 直接忽略type，且不发请求——必须起本地服务（如python3 -m http.server 8000） - 服务器返回的
Content-Type是text/plain或空着，浏览器当文本处理，根本不进音频解码器
验证方式：打开 Network 面板，点音频请求，看 Response Headers 里的 Content-Type 是否匹配后缀和编码。
preload="auto" 还要不要加
2026 年已基本弃用。preload="auto" 在桌面端常导致首屏卡顿，在移动端几乎被 Safari 忽略，Lighthouse 会标为性能风险。
按场景选更稳妥的值：
- 小音频（≤ 500KB，如 UI 提示音）→
preload="metadata"：只加载头信息，秒出时长，不占带宽 - 背景音乐（1–3MB）→
preload="none"：等用户点播放按钮再加载，避免空耗流量 - 绝对不要在大音频上写
preload="auto"：iOS Safari 可能直接中断连接，Chrome 会延迟渲染
真正影响播放成功率的是 <source> 的顺序和 type 声明，不是 preload 值。
最容易被忽略的一点：权限解锁是一次性的，但只限当前页面会话。刷新、关闭标签页、切到后台太久（iOS 可能 30 秒），媒体上下文就失效，下次 play() 又要等用户再点一次。
