HTML音频不播主因是格式声明、服务器响应、浏览器策略未对齐：type值必须准确（如MP3用audio/mpeg）、服务器Content-Type需匹配、本地开发须启用HTTP服务而非file://协议，且autoplay需用户真实手势触发。
HTML 音频不播，90% 不是代码写错了，而是格式声明、服务器响应、浏览器策略三者没对齐。
type 属性写错就等于没写
浏览器只认 type 值，不猜文件后缀。写 <source src="a.mp3" type="audio/mp3"></source> 是无效的——Safari 直接跳过，Firefox 拒绝解码，Chrome 可能加载但 duration 为 NaN。
- MP3 必须用
type="audio/mpeg"（不是audio/mp3） - OGG 必须用
type="audio/ogg"（不是audio/ogv），且编码必须是 Vorbis（用ffprobe a.ogg确认含Audio: vorbis） - WAV 用
type="audio/wav"，但别用 IEEE Float 编码（Chrome 直接拒） - 省略
type时，iOS Safari 静默失败，控制台无报错
服务器 Content-Type 不匹配，200 也白搭
HTTP 状态 200 只代表请求成功，不代表浏览器愿意解码。如果响应头里 Content-Type 是 text/plain 或为空，Chrome/Firefox 就当普通文本扔掉，连错误都不抛。
- Apache：在
.htaccess或虚拟主机配置中加AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx：在
types块里补audio/mpeg mp3;、audio/ogg ogg; - 本地开发别双击 HTML：
file://协议下 Chrome/Firefox 会屏蔽音频加载，必须起服务，例如python3 -m http.server 8000 - 验证方式：Network 面板 → 点音频请求 → 查 Response Headers → 确认
Content-Type准确匹配
autoplay 失效不是 JS 写错了，是浏览器在等“动手”
Chrome ≥70、Firefox ≥66、Safari ≥12.1 默认拦截有声自动播放。autoplay 属性写了也白写，play() 调用会直接 reject，报 NotAllowedError。
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠路径：用户真实手势触发，比如按钮点击，且事件监听器要绑定到具体元素上（
document.querySelector('#playBtn').addEventListener('click', () => audio.play())） -
DOMContentLoaded、setTimeout、甚至冒泡到document的 click 都不算有效手势 - iOS 还额外要求：audio 元素不能被
display: none、opacity: 0或视口外遮挡 - 静音自动播（
autoplay muted）虽可行，但 iOS Safari 仍可能因未获用户交互而静默丢弃
最容易被忽略的点是：所有 <source></source> 必须在 <audio></audio> 首次解析时就存在，动态插入无效；iOS 不支持 canPlayType() 返回 "probably" 的判断逻辑，别信它；顺序决定成败——MP3 放最前，OGG 次之，WAV 仅作短提示音兜底。
