90%音频无法播放主因是未遵循浏览器真实规则：格式需多源兜底、mime类型须精确匹配（如audio/mpeg）、播放必须由用户手势触发且响应头content-type正确。
直接上手就能解决：90% 的音频无法播放，不是代码写错，而是没按浏览器真实规则来。关键就三件事——格式兜底、MIME 正确、播放时机对。
audio 标签必须用 <source></source> 多格式写法
只写 src="a.mp3" 就等于放弃兼容性。Firefox 和 Safari 会直接跳过，控制台也不报错，只是静默失败。
-
type值必须准确：audio/mpeg（不是audio/mp3），audio/ogg（不是audio/oga） - Ogg 文件得是 Vorbis 编码，用
ffprobe a.ogg确认输出里有Audio: vorbis - 顺序很重要：把
<source src="a.mp3" type="audio/mpeg"></source>放最前，<source src="a.ogg" type="audio/ogg"></source>放第二 - 别加
.wav作 fallback：Chrome 对 IEEE Float 编码的 WAV 直接拒绝，文件还大
服务器必须返回正确的 Content-Type 响应头
哪怕 <source></source> 写得再全，如果响应头是 text/plain 或空着，浏览器连解码器都不调用，音频就是废标签。
- Apache 用户，在
.htaccess或虚拟主机配置里加：AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx 用户，在
types块里补：audio/mpeg mp3;、audio/ogg ogg; - 本地开发别双击 HTML：用
python3 -m http.server 8000启服务，否则 Chrome/Firefox 在file://下直接屏蔽加载 - 检查 Network 面板里音频请求的响应头，确认
Content-Type精确匹配后缀和编码
play() 必须由用户手势触发，且要处理 Promise 拒绝
写了 autoplay 却没声音？不是 JS 错了，是浏览器在等你“动手”。现代浏览器（含微信 iOS）要求首次有声播放必须由用户点击、触摸或键盘事件触发。
- 删掉
autoplay属性，改用按钮绑定：document.querySelector('button').addEventListener('click', () => audio.play().catch(e => {})) - 别在
DOMContentLoaded或window.onload里调play()，100% 失败 - iOS Safari 更严格：元素必须在视口内、不能被
display: none或opacity: 0遮挡 - 想静音自动播？必须同时满足：
autoplay+muted+volume = 0，且后续不能被 JS 改写
最容易被忽略的是：即使所有代码都对，只要音频文件实际编码不被目标浏览器支持（比如 Safari 遇到 fltp 编码的 MP3），MEDIA_ERR_SRC_NOT_SUPPORTED（code: 4）就会出现——它不报路径错、不报网络错，只说明“解不了码”，这时候换格式比调代码更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
