audio标签播放失败的根源是格式、MIME类型和触发时机三关未过：路径需可访问，Content-Type须严格匹配type值（如audio/mpeg），且必须由用户手势触发播放。
audio 标签能播出来，不等于所有浏览器都响——真正卡住的从来不是写法，而是格式、MIME、触发时机这三关。
为什么写了 src 还是静音或报错
浏览器不会因为 audio 标签存在就去加载音频；它只认三件事：路径可访问、响应头 Content-Type 匹配 type 值、用户已“动手”。常见静默失败场景：
- 本地双击 HTML 文件（
file://协议），Chrome/Firefox 直接禁用音频加载，Network 面板里请求状态可能是cancelled或无记录 - 服务器没配 MIME 类型，比如 MP3 返回
Content-Type: text/plain，浏览器当纯文本扔掉，连解码器都不唤起 -
<source src="a.mp3"></source>没写type，Safari/iOS 直接跳过，Firefox 可能试一次 404 后放弃 - 写了
autoplay但没muted，Chrome 84+ 会拒绝并抛NotAllowedError，控制台显示The play() request was interrupted
source 的 type 必须严格匹配 MIME
浏览器靠 type 字符串做格式路由，不是靠文件后缀猜。写错一个字母就等于删掉这个源。
- MP3 必须写
type="audio/mpeg"，audio/mp3是无效值 - OGG 必须是
audio/ogg，且推荐用 Vorbis 编码（ffprobe a.ogg看输出含Audio: vorbis），Opus 虽支持但部分旧 Safari 不认 - WAV 不要随便加：
audio/wav在 Safari 上比 OGG 更稳，但 Chrome 对 IEEE Float 编码的 WAV 会直接拒载 - 顺序不能乱：把兼容性最强的放最前，例如
<source src="a.mp3" type="audio/mpeg"></source>→<source src="a.ogg" type="audio/ogg"></source>→<source src="a.wav" type="audio/wav"></source>
JavaScript 播放必须捕获 Promise 拒绝
调用 audio.play() 不再是“发个命令就响”，它返回 Promise，失败时不会抛异常，而是进 catch。
立即学习“前端免费学习笔记（深入）”；
- 不要在
DOMContentLoaded或load事件里直接调play()，100% 被拒 - 必须绑定到用户手势事件：按钮点击、触摸、键盘按键（
keydown里event.code === 'Enter'也算） - 捕获常见错误：
NotAllowedError（没交互）、NotSupportedError（所有source都被跳过）、AbortError（网络中断） - 监听
error事件看具体哪个源挂了：audio.error?.code === 4表示全部source均不可用（MEDIA_ERR_SRC_NOT_SUPPORTED）
iOS Safari 的隐藏限制最狠
它不只拦自动播放，还拦“看似手动实则无效”的播放调用。
- 元素必须在视口内：
display: none、opacity: 0、visibility: hidden或滚动出屏都会导致play()静音或失败 -
preload="auto"在 iOS 上基本被忽略，设成preload="metadata"更实际 - 即使用户点过按钮，如果后续 JS 把
audio元素移出 DOM 再插回去，手势授权就失效，得重新点一次 - 静音自动播（
autoplay muted）在 iOS 上也需页面已获得至少一次有效手势授权，否则照样沉默
真正麻烦的从来不是“怎么写”，而是“什么时候、在哪种上下文、用什么格式、由谁触发”——这四件事少对一个，audio 就只是个空标签。
