90%跨平台音频静默失败主因是资源未加载：src 404、file://协议、Content-Type错误（如text/plain）、<source>缺type属性或写错（audio/mp3应为audio/mpeg）、未闭合标签等，需检查Network面板状态码与MIME类型。
只写一个 <audio src="x.mp3"> 标签，90% 的跨平台播放会静默失败——不是代码错了，是浏览器根本没加载音频。
为什么加了 controls 却没按钮？
控件不显示，通常不是样式或 JS 问题，而是音频资源压根没加载成功。浏览器在加载失败时不会报错，只会跳过整个 <audio> 元素。
-
<audio>标签未闭合（比如漏了</audio>），Safari 会直接忽略 -
src指向 404 或使用file://协议本地双击打开，Chrome/Firefox 会静默拒绝 -
<source>没写type属性，Safari 和旧版 Edge 可能跳过该源，最终无可用音源 - 服务器返回的
Content-Type错了，比如.mp3文件响应头是text/plain，浏览器当普通文本扔掉
检查方法：打开开发者工具 → Network 面板，确认音频请求状态码是 200，且 Response Headers 中 Content-Type 是 audio/mpeg（MP3）、audio/ogg（OGG）等合法 MIME 类型。
<source> 必须配对 type，且格式不能乱写
只写 <source src="a.mp3"> 等于把播放权交给浏览器掷骰子：Firefox 可能跳过，iOS Safari 甚至不触发 canplay 事件。
立即学习“前端免费学习笔记（深入）”；
- MP3 必须写
type="audio/mpeg"，audio/mp3是错的 - OGG 推荐用 Vorbis 编码（不是 Opus），可用
ffprobe a.ogg确认输出含Audio: vorbis - 别加
.wav作 fallback：Chrome 对 IEEE Float 编码的 WAV 直接拒绝，Firefox 虽支持但体积大、加载慢 - 必须至少提供两组：
<source src="a.mp3" type="audio/mpeg">+<source src="a.ogg" type="audio/ogg">
服务器配置也要同步：Apache 加 AddType audio/mpeg .mp3，Nginx 在 types 块里补 audio/mpeg mp3;。
autoplay 失效不是 bug，是策略强制拦截
写了 autoplay muted 还没声音？不是 JS 写错了，是浏览器在等用户“动手”。现代浏览器（含微信 iOS）要求首次有声播放必须由用户手势触发。
- 删掉
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) 就是格式被判死刑——浏览器连解码器都没调用。
JS 控制 play()/pause() 的关键时机
不是拿到元素就立刻 .play()，顺序错了 UI 就不同步：
-
currentTime必须等loadedmetadata事件后才能设，否则值被忽略，duration也读不到 - 判断是否“正在播放”，别用
audio.paused === false——播放结束时ended为true，paused也是true，正确写法是!audio.paused && !audio.ended -
timeupdate触发太密（约 200–250ms 一次），别在里面直接更新 DOM 文本，应节流或用requestAnimationFrame批量处理
多页跳转时背景音乐断掉，靠 localStorage 同步时间点既难调试又易丢——真正稳定的解法是把音频实例和状态管理抽离到单页应用（SPA）生命周期中，或用 SharedWorker 统一托管（但兼容性有限）。最常被忽略的，其实是移动端 WebView 对 canplay 事件的触发不稳定，iOS 上尤其依赖 loadedmetadata 而非 canplay。
