音频降级需按兼容性顺序排列source：MP3→Opus（WebM）→Ogg→WAV，type属性须精确声明且与服务端Content-Type严格匹配，结构上source须嵌于audio内、兜底文字置于末尾。
用 <audio></audio> 配合多个 <source></source> 实现音频降级，核心是让浏览器按顺序尝试加载，直到找到它能解码的第一个格式——不是挑画质最好的，而是找第一个“能播的”。顺序、type 声明、服务端响应三者必须严丝合缝。
格式顺序要按真实兼容性排，别按新旧或压缩率
主流浏览器对音频编码支持差异明显：
- Safari 和旧版 Edge 主要认 MP3（
audio/mpeg），几乎不支持 Opus 或 Ogg Vorbis - Chrome、Firefox、新版 Edge 对 WebM（Opus）和 MP3 都支持，但 Opus 效率更高、体积更小
- Ogg（Vorbis）在 Firefox 中稳定，但在 Safari 和部分移动端 WebView 中基本不可用
- WAV 是未压缩 PCM，兼容性极好但文件巨大，只建议作兜底
推荐顺序（从高到低兼容性）：
-
MP3（
audio/mpeg）→ 最广谱，iOS/macOS/Safari/旧设备全支持 -
Opus（WebM 封装）（
audio/webm; codecs="opus"）→ 现代浏览器首选，音质好、带宽省 -
Ogg（Vorbis）（
audio/ogg; codecs="vorbis"）→ Firefox 友好，可选 -
WAV（
audio/wav）→ 兜底用，确保老系统或离线环境至少能响
type 属性必须精确声明，不能省略或写宽泛
浏览器靠 type 决定“跳不跳过”这个 <source></source>。写错或太笼统，会导致请求发出去却白忙一场。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
type="audio/mpeg"（MP3）、type="audio/webm; codecs="opus""、type="audio/ogg; codecs="vorbis"" - ❌ 错误：
type="mp3"、type="audio/mp3"、type="audio/mpeg; codecs="mp3""（codecs 值无效） - ⚠️ 注意：Safari 对
codecs字符串大小写敏感，"OPUS"或"opus "（带空格）都会失败
服务端 Content-Type 必须和 type 完全匹配
浏览器会校验 HTML 中写的 type 和服务器返回的 Content-Type 响应头是否一致。哪怕 HTML 写得再准，服务端返回 text/plain 或 application/octet-stream，该 <source></source> 就会被静默跳过。
- 用
curl -I https://yoursite.com/https://www.php.cn/link/e8db4a39aa1e7a59cc6a91c2ba655077检查是否返回Content-Type: audio/mpeg - MP3 文件不能是伪装成 .mp3 的 AAC 或 FLAC；WebM 必须真封装 Opus，不是只改后缀
- CDN 或静态托管平台（如 GitHub Pages、Vercel）默认可能不配对 MIME 类型，需手动配置或改用支持音频 MIME 的托管服务
结构规范与兜底内容不能少
所有 <source></source> 必须嵌在 <audio></audio> 内部，且不能和 <audio></audio> 自身的 src 属性共存。兜底文字必须放在所有 <source></source> 之后、 之前。
正确结构示例：
