audio标签静音首要原因是Network中音频请求返回404或Content-Type错误，表明浏览器未加载到音频或拒绝解码；需检查status、Content-Type及右键Open in new tab验证路径与MIME配置。
Network 面板里音频请求返回 404 或 Content-Type 错误
这是最常被忽略的“静音”原因：浏览器根本没加载到音频，或加载了但拒绝解码。你看到 <audio> 标签，却听不到声音，大概率不是 JS 写错了，而是资源卡在 HTTP 层。
打开开发者工具 → Network → 切换 Media 类型 → 刷新页面，重点看三点：
-
status是否为200（不是404、403或跨域0） -
Content-Type响应头是否匹配文件类型（.mp3必须是audio/mpeg，不是text/plain或空） - 右键该请求 →
Open in new tab：能直接播放说明路径和编码没问题；打不开或报错，说明服务器 MIME 配置缺失或文件损坏
本地双击 HTML 文件（file:// 协议）时，Chrome/Firefox 会直接屏蔽音频加载 —— 必须起本地服务：python3 -m http.server 8000。
audio.play() 报 NotAllowedError 或 Promise rejected
这不是代码 bug，是浏览器主动拦截。现代浏览器（含微信 iOS）要求：首次有声播放必须由用户手势触发（click、touchstart、keydown），否则 play() 一定失败。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
- 在
DOMContentLoaded或window.onload里直接调audio.play() - 用
setTimeout延迟调用，仍无用户交互上下文 - 写了
autoplay muted，但后续 JS 又把audio.volume = 1或audio.muted = false，导致静音状态被破坏
可靠做法：绑定一次用户事件，例如
document.body.addEventListener('click', () => {
audio.play().catch(e => console.warn('play failed:', e));
}, { once: true });
iOS Safari 播放失败但其他浏览器正常
iOS Safari 是兼容性“深水区”：它对 <audio> 的限制比桌面 Chrome 更严，且错误往往静默，不抛异常。
必须同时满足以下条件才可能播放：
-
<audio>元素在视口内（未被display: none、opacity: 0、visibility: hidden遮挡） -
preload设为metadata（auto在 iOS 上基本无效） -
play()调用必须包裹在用户手势回调中，且不能是异步延迟后的调用（比如Promise.then(() => audio.play())不行） - 微信 iOS 端还需等
WeixinJSBridgeReady事件，否则play()直接静音返回
调试建议：在 iOS Safari 的 Console 中手动输入 document.querySelector('audio').addEventListener('error', e => console.error(e))，再点播放，看是否触发 MEDIA_ERR_SRC_NOT_SUPPORTED（code: 4）—— 这代表格式被判死刑，不是路径问题。
多个写法无效，只播 MP3 却在 Firefox 里静音
<source> 不是“多选一”，而是“从上到下匹配第一个支持的 type”。如果 type 写错，浏览器会跳过整条 <source>，最终 fallback 失败。
关键细节：
-
type="audio/mp3"❌ 错误，必须是type="audio/mpeg" -
type="audio/ogg"✅ 正确，但 Ogg 文件必须是 Vorbis 编码（不是 Opus），可用ffprobe your.ogg确认输出含Audio: vorbis - 顺序很重要：把兼容性最强的放最前，推荐
mp3→ogg→ （慎用）wav；别指望靠 JS 动态插入<source>来兜底 - Firefox 默认不支持 MP3（依赖系统解码器），所以仅靠 MP3 fallback 一定会在 Firefox 失效 —— 必须配 OGG
最后注意：即使写了两个 <source>，若服务器没配对 MIME 类型（比如 Nginx 缺 audio/ogg ogg;），浏览器照样当文本扔掉，不会尝试下一个。
