90%音频无法播放是因格式链路断裂，需严格校验文件实际编码、后缀、type属性（如audio/mpeg）、Content-Type响应头三者是否一致，并通过ffprobe验证编码、用HTTP服务而非file://协议测试。
音频插不进去，90% 不是代码写错，而是格式链路断在了文件后缀、MIME 类型或编码器上。 直接改个 .mp3 后缀就以为万事大吉？浏览器根本不认——它看的是实际编码 + 响应头 + type 属性三者是否咬合。下面按真实排查顺序列关键点。
检查文件实际编码是否匹配后缀
后缀只是标签，不是真相。用 ffprobe 看真实编码：
-
ffprobe a.mp3应输出Audio: mp3（不是mp3float或其他） -
ffprobe a.ogg必须含Audio: vorbis；若显示opus，这个.ogg文件浏览器大概率跳过 -
.wav文件慎用：Chrome 拒绝 IEEE Float 编码的 WAV，Firefox 虽能播但体积大、加载慢
确认 type 属性与后缀、编码严格对应
type 不是可选项，也不是“差不多就行”——拼错一个字母就让整个 <source> 被浏览器忽略：
-
type="audio/mp3"❌ 错误，必须是type="audio/mpeg" -
type="audio/ogg"✅ 正确（仅当文件是 Vorbis 编码） -
type="audio/wav"✅ 可用，但只建议用于极短提示音，且服务器 MIME 必须配对 - 不要写
type="audio/mp4"—— audio/mp4 本身不被支持，需明确audio/mp4; codecs="aac"，但兼容性差，不推荐
验证服务器返回的 Content-Type 响应头
Network 面板里音频请求返回 200，却没声音？先点开响应头，看 Content-Type 是什么：
立即学习“前端免费学习笔记（深入）”；
- 如果是
text/plain、application/octet-stream或空着 → 浏览器根本不会调用解码器，直接当文本扔掉 - 正确值必须是：
audio/mpeg、audio/ogg或audio/wav，且与后缀和type一致 - Apache 用户：在
.htaccess加AddType audio/mpeg .mp3和AddType audio/ogg .ogg - Nginx 用户：在
types块加audio/mpeg mp3;和audio/ogg ogg;
本地开发别双击 HTML，起 HTTP 服务再测
file:// 协议下，Chrome/Firefox 会直接屏蔽音频加载，连错误都不报——这不是 bug，是安全策略：
- 用
python3 -m http.server 8000启服务，访问http://localhost:8000 - VS Code 安装 Live Server 插件，右键 HTML 文件选 “Open with Live Server”
- 路径中避免空格和中文，比如
./sound/test-audio.mp3比./sound/测试音频.mp3更可靠
最常被忽略的一环：你以为改了后缀就等于改了格式。其实 ffmpeg -i input.wav -c:a libmp3lame output.mp3 才是真转换，单纯重命名只会让浏览器加载失败后静默跳过下一个 <source>。
