audio标签不播放的首要排查项是src路径与MIME类型：需在Network面板确认请求返回200且Content-Type为audio/mpeg等合法类型；本地file://协议下Chrome禁用自动播放，必须启用本地服务器；iOS Safari要求play()必须由用户手势触发，preload应设为metadata；多格式fallback按MP3→OGG→WAV顺序静态声明；静音自动播放需确保muted属性存在且volume为0。
audio 标签不播放，先查 src 路径和 MIME 类型
浏览器拒绝播放最常见的原因是资源加载失败，但控制台未必报错。用 Network 面板确认 src 请求返回 200，且响应头 Content-Type 是 audio/mpeg、audio/wav 或 audio/ogg 等合法类型。本地文件用 file:// 协议时，Chrome 会直接禁用 audio 自动播放（连 play() 调用都抛 DOMException: play() failed because the user didn't interact with the document first），必须走本地服务器（如 python3 -m http.server）。
移动端 iOS Safari 播放失败，重点看 preload 和用户手势
iOS Safari 对音频自动播放限制极严：即使加了 autoplay，没用户点击/触摸触发，play() 必然失败。解决方式只有两个：
- 所有
play()调用必须包裹在用户事件回调里（如button.addEventListener('click', () => audio.play())） -
preload="auto"在 iOS 上无效，建议设为preload="metadata"，减少首帧等待时间又不触发预加载阻塞 - 避免在
load或canplay回调里直接play()，iOS 不认这种“非手动触发”的上下文
多格式 fallback 要按浏览器支持顺序写 source
不是所有浏览器都支持同一种编码。MP3 兼容性最广，但 Firefox、Safari 对某些 MP3 编码（如 VBR）有兼容问题；OGG（Vorbis）在 Firefox/Chrome 表现好，但 Safari 完全不支持；WAV 无压缩，体积大，仅适合短提示音。正确写法是：
<audio controls><source src="sound.mp3" type="audio/mpeg"><source src="sound.ogg" type="audio/ogg"><source src="sound.wav" type="audio/wav"></source></source></source></audio>
浏览器从上到下匹配第一个支持的 type，所以把兼容性最强的放最前。别指望靠 JS 动态判断再插入 —— canPlayType() 返回值模糊（如 "probably" 不等于“一定能播”），不如静态 fallback 可靠。
静音自动播放在 Chrome 84+ 后默认允许，但仍有隐藏条件
Chrome 允许静音音频自动播放，前提是：muted 属性存在，且 volume 为 0，且未被后续 JS 改写。常见坑点：
-
有效，但无效（布尔属性不写值才表示 true） - JS 中设置
audio.muted = true后再play()，仍可能失败 —— 必须在play()前确保muted已为 true，且 DOM 已渲染 - 即使静音，如果页面之前被用户标记为“低参与度”，Chrome 仍可能降级处理（表现为
play()返回 Promise 但卡住）
实际项目里，最常被忽略的是 iOS 手势绑定时机和 MIME 类型校验 —— 很多人在本地双击打开 HTML 测试，以为是代码问题，其实是协议和服务器缺失导致的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
