html音频不支持播放主因是格式fallback错误：必须用+双格式兜底，type不可写错，且需配对服务器mime类型与用户手势触发play()。
HTML 音频不支持播放，90% 是格式 fallback 没写对，不是代码漏了 controls 或 src 路径错。
audio 标签必须用 <source></source> 多格式兜底
只写一个 src="a.mp3" 就等于把播放权交给浏览器掷骰子：Firefox 会直接跳过，Safari 可能播一半静音，iOS Safari 甚至不触发 canplay 事件。浏览器不会报错，只是沉默。
- 必须至少提供
<source src="a.mp3" type="audio/mpeg"></source>+<source src="a.ogg" type="audio/ogg"></source>两组 -
type属性不能省——type="audio/mp3"是错的，必须是audio/mpeg - Ogg 文件优先用 Vorbis 编码（不是 Opus），用
ffprobe a.ogg确认输出里有Audio: vorbis - 不要加
.wav作 fallback：Chrome 对 IEEE Float 编码的 WAV 直接拒绝，Firefox 虽支持但文件体积大、加载慢
服务器没配对 MIME 类型，audio 就是废标签
即使 <source></source> 写得再全，如果响应头里 Content-Type 是 text/plain 或空着，浏览器会把它当普通文本扔掉，连解码器都不调用。
- Apache 用户，在
.htaccess或虚拟主机配置里加：AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx 用户，在
types块里补：audio/mpeg mp3;、audio/ogg ogg; - 本地开发用
python3 -m http.server 8000启服务，别双击 HTML 文件——file://协议下 Chrome/Firefox 会直接屏蔽音频加载 - 检查 Network 面板里音频请求的响应头，确认
Content-Type准确对应后缀和编码
autoplay 失效不是 bug，是浏览器策略强制拦截
写了 autoplay muted 还没声音？不是 JS 写错了，是浏览器在等用户“动手”。现代浏览器（含微信 iOS）要求首次播放必须由用户手势触发，否则 play() 返回被 reject 的 Promise，控制台报 The play() request was interrupted。
- 删掉
autoplay属性，改用按钮点击触发：document.querySelector('button').addEventListener('click', () => audio.play().catch(e => {})) - 不要在
DOMContentLoaded或window.onload里调play()，100% 失败 - iOS Safari 更严格：元素必须在视口内、未被
display: none或opacity: 0遮挡，否则即使点过也静音 - 想静音自动播？
muted+autoplay在多数桌面浏览器可行；想有声自动播？只能等用户第一次交互后再调一次play()
控制台报 MEDIA_ERR_SRC_NOT_SUPPORTED（code: 4）就是格式被判死刑
这个错误不是路径错、不是网络挂、不是 CORS，是浏览器打开文件后当场认定“这玩意我解不了”，连试都不试第二遍。它常被误读为加载失败，其实 Network 面板里请求状态是 200，只是解码器罢工了。
- 用
ffprobe your-audio.mp3查真实编码：重点看Stream #0:0: Audio: mp3 (mp3), 44100 Hz, stereo, fltp, 128 kb/s中的fltp（浮点）——Safari 会拒收 - MP3 推荐用 MPEG-1 Layer 3 + 44.1kHz + 16-bit + CBR 编码，避开 HE-AAC、AAC-LC 以外的变种
- OGG 推荐用 Vorbis + 44.1kHz + stereo + 128kbps，避免使用 Opus（部分旧版 Firefox 不认）
- 别信文件后缀：.mp3 文件可能是 AAC 容器，.ogg 可能是 FLAC 封装，用工具验明正身再上线
最麻烦的点往往藏在“已经能播”的假象里：比如 MP3 在 Chrome 里响了，就以为万事大吉，结果发给 Firefox 用户，对方页面一片死寂——因为没写 OGG fallback，也没配 MIME，更没处理自动播放拦截。兼容性不是“能跑就行”，是每个环节都得经得住拆解验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
