audio标签兼容需用source多格式fallback：MP3（audio/mpeg）放首位保全浏览器支持，次选OGG（audio/ogg）适配Firefox/Chrome，再加m4a（audio/mp4）或WAV兜底，type必须精确且服务器Content-Type严格匹配。
audio 标签本身不决定支持哪些格式，真正起作用的是浏览器——不同浏览器对编码器的支持差异很大，直接写死单一格式（比如只用 src="xxx.mp3"）大概率导致部分用户听不到声音。
哪些格式能用，取决于浏览器实际解码能力
主流格式就三个：
-
MP3：IE9+、Chrome、Firefox、Safari、Opera 全支持，但它是专利格式（虽已过期，历史兼容性仍是事实标准） -
Ogg Vorbis（.ogg）：Firefox、Chrome、Opera 原生支持，Safari 和旧版 IE 完全不认 -
WAV（PCM 编码）：所有现代浏览器都支持，但文件体积大，只适合几秒内的提示音
AAC（常以 .m4a 形式存在）在 Safari 和 Chrome 中支持良好，Firefox 从 2022 年起也逐步启用，但不是所有版本都稳定；Opus（通常封装在 .webm 中）在 Chrome/Firefox/Edge 中表现好，但 Safari 目前不支持。
必须用 <source> 提供多格式 fallback
单靠 src 属性无法解决兼容问题。浏览器按 <source> 出现顺序依次尝试，第一个能解码的就用：
立即学习“前端免费学习笔记（深入）”；
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> <source src="music.m4a" type="audio/mp4"> 您的浏览器不支持 audio 元素。 </audio>
注意：
-
type属性必须写准确，否则浏览器可能跳过该<source>（例如写成audio/mp3是无效 MIME 类型） - 不要依赖文件后缀判断格式，服务器返回的
Content-Type响应头必须匹配type值 - Safari 对
audio/ogg完全无视，哪怕你把它放在第一个位置也没用
preload 和格式选择有隐性关联
preload="auto" 在移动端可能触发提前下载整个音频，如果用了大体积的 WAV 或高码率 MP3，会拖慢首屏；而 preload="metadata" 只取时长、采样率等信息，对多格式场景更安全——尤其当第一个 <source> 是个大文件但最终没被选用时，浪费带宽。
最常被忽略的一点：
即使你列了 MP3 和 Ogg，如果服务器没正确配置 Content-Type（比如把 .ogg 返回成 text/plain），浏览器会直接跳过它，连控制台都不报错——只会静默 fallback 到下一个，或者干脆不播放。上线前务必用开发者工具的 Network 面板检查每个 <source> 的响应头。
