判断浏览器是否支持audio标签及具体格式不能只靠canPlayType返回"probably"，它仅表示解码器可能就位，不保证网络、MIME、权限正常；需结合typeof Audio !== 'undefined'、UA检测、DOMContentLoaded后执行、error事件监听、Network面板验证Content-Type、用户手势触发等多维度实测。
怎么判断浏览器是否支持 audio 标签及具体格式
不能只靠 document.createElement('audio').canPlayType 返回 "probably" 就认为能播——它只表示“解码器可能就位”，不保证网络、MIME、权限都 OK。真实环境里，Safari 可能返回 "maybe" 却静默跳过 source，Android WebView 可能直接忽略 type 值而按后缀硬匹配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
canPlayType('audio/mpeg')检查 MP3 支持（Chrome/Firefox/Safari 全支持），canPlayType('audio/ogg')仅作补充，别依赖它兜底 - 对 iOS Safari，额外检查
typeof Audio !== 'undefined'和!!navigator.userAgent.match(/iPhone|iPad|iPod/)，因为它的 autoplay 策略最严 - 不要在页面加载时立刻调用
canPlayType，等DOMContentLoaded后再执行，避免 DOM 未就绪导致误判
autoplay 失败时如何区分是策略拦截还是资源问题
现代浏览器对 autoplay 的拦截不抛 JS 错误，也不触发 play 事件，只在控制台输出警告（如 Chrome 的 “Autoplay is only allowed…”）。但同样静默失败，也可能是 MP3 文件损坏、CDN 返回了 404 或 content-type 错误。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
error事件：audio.addEventListener('error', () => console.log('source failed:', audio.error?.code))；code === 4表示所有source都不可用，大概率是路径或 MIME 问题 - 检查 Network 面板：确认音频请求状态码为 200，且 Response Headers 中
Content-Type与source的type属性严格一致（例如 MP3 必须是audio/mpeg，不是audio/mp3） - 若
error不触发但也没声音，再看控制台是否有 autoplay 警告——有则属策略拦截，需补muted或等用户手势
移动端（尤其 iOS）必须绕过的三个硬限制
iOS Safari 不是“兼容性差”，而是有三道无法绕过的沙盒限制：首次播放必须由用户手势触发、静音自动播放后无法通过 JS 解除静音、file:// 协议下完全禁用音频加载。任何想“偷偷播”的尝试都会失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有 iOS 相关逻辑必须包裹在
document.addEventListener('click', handler, { once: true })内，且handler中立即调用audio.play()，不能加延时或 Promise 链 - 若已用
muted自动播过，后续想恢复有声，必须重新调用audio.play().catch(...)并接受可能被拒——iOS 不允许 JS 主动取消静音授权 - 本地开发调试时，绝不用
file://打开 HTML，改用python3 -m http.server或 VS Code Live Server 启服务，否则连controls都不会渲染
怎么写 source 顺序和 type 才不被 Android WebView 忽略
华为、小米等厂商的 Hybrid WebView（基于旧版 Chromium）只读第一个 source，且不解析 type，全靠文件后缀匹配。如果把 .ogg 放前面，MP3 就永远没机会加载；如果省略 type，某些 CDN 会返回 application/octet-stream，导致 Safari 直接跳过该 source。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
source顺序固定为：.mp3→.ogg→ （可选）.wav或.opus；MP3 必须是第一个，且type="audio/mpeg" - 每个
source都显式写type：MP3 用audio/mpeg，OGG 用audio/ogg，OPUS 用audio/opus，别简写 - 上线前用真机测试：在华为 Mate 50（EMUI）、小米 13（HyperOS）上打开页面，用开发者工具远程调试，确认 Network 中加载的是第一个
source对应的 URL
audio 标签”，而是当 iOS 用户点了按钮却没声音、当华为手机加载不出 MP3、当控制台一片空白却死活不播——这些地方没埋探测点，问题就永远定位不到。 
