mp3 + m4a 是当前最稳的音频 fallback 组合，2026年实测覆盖99%以上有效流量且无兼容断层；mp3需确保mpeg-1 layer 3编码，m4a必须为aac-lc编码并配对audio/mp4 mime类型与codecs="aac"声明。
MP3 + M4A 是当前最稳的音频 fallback 组合
2026 年实测下来，audio/mpeg（MP3）和 audio/mp4（M4A/AAC）覆盖了 99% 以上的有效流量，且无明显兼容断层。Firefox 在部分 Linux 发行版中默认禁用 MP3 解码器（专利原因），但只要搭配 audio/mp4 作为第二顺位，就能兜住；Safari/iOS 完全不认 audio/ogg，却对 audio/mp4 支持稳定——前提是 AAC-LC 编码，不是 HE-AAC 或 ALAC。
常见错误现象：<source src="a.mp3"></source> 不写 type，Safari 直接跳过；.m4a 文件实际封装的是 ALAC，canPlayType('audio/mp4; codecs="aac"') 返回空字符串，等于白配。
-
audio/mpeg：Chrome、Edge、Firefox（除少数 Linux 版）、Safari 全支持，唯一要求是文件内确实是 MPEG-1 Layer 3 编码 -
audio/mp4：必须搭配codecs="aac"，且服务端返回Content-Type: audio/mp4，否则 Safari 静默失败 -
audio/ogg：Chrome/Firefox 支持 Opus/Vorbis，但 Safari 17.5 仍不支持，且canPlayType('audio/ogg')在 Safari 中恒返回空字符串
Opus 格式在 Chrome/Firefox 中表现优异但 Safari 仍缺席
audio/ogg; codecs=opus 在 Chrome 和 Firefox 中解码快、体积小（比 MP3 小 30%～50%），但 Safari 17.5 及更早版本完全不识别该 type 值——不是报错，而是直接忽略整个 <source></source>，连 error 事件都不触发。
验证方式很简单：打开控制台执行 new Audio().canPlayType('audio/ogg; codecs="opus"')，返回 "probably" 才算真支持；返回空字符串或 "maybe" 都不可靠。
- Opus 文件后缀建议用
.opus，而非.ogg，避免封装混淆 - Nginx 必须显式配置：
add_type audio/ogg .opus;，否则响应头为application/octet-stream，浏览器直接拒收 - 跨域场景下，服务端还需返回
Access-Control-Allow-Origin: *，否则 Safari 连解码器都不加载
WAV 和 WebM 音频的实际支持边界在哪
audio/wav 看似“全支持”，但仅限于 16-bit PCM 格式；若含 IEEE float 或 24-bit 深度，Firefox 可能加载但静音，Safari 则直接卡在 networkState === 0（NETWORK_EMPTY）状态。
audio/webm 在 Chrome/Firefox 中支持 Opus/Vorbis，但 Safari 17 仍未实现 —— 这不是 bug，是 Apple 明确未纳入解码器列表。哪怕你写了 type="audio/webm; codecs=opus"，Safari 也当它不存在。
-
audio/wav仅适合短提示音（ - 别把
.wav放第一位：它会阻塞后续<source></source>的尝试，导致降级链断裂 -
audio/webm的 MIME 类型不能简写为audio/webm，必须带codecs参数，否则 Chrome 会发起请求再解码失败
type 属性写错一个字符，整个 source 就失效
浏览器不是靠文件后缀或内容嗅探来判断格式，而是严格比对 type 属性与服务端 Content-Type 响应头。二者逐字符不一致，该 <source></source> 就被跳过，控制台通常只报 DOMException: The element has no supported sources，根本看不出是服务端问题。
典型错误写法：type="audio/mp3"（非法 MIME）、type="audio/mpeg; codecs=h264"（codecs 写错）、type="audio/mp4"（缺 codecs，导致 Safari 不预判直接发请求再失败）。
- 正确写法：
type="audio/mpeg"、type="audio/mp4; codecs="aac""、type="audio/ogg; codecs="opus"" - 服务端 Content-Type 必须完全匹配，包括空格、引号、大小写 ——
audio/ogg; codecs="opus"对应Content-Type: audio/ogg，不能多出; charset=utf-8 - 本地开发用
file://协议时，type匹配逻辑完全失效，必须走http://或https://才能验证真实行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
