HTML中标签用于同一音频的多格式兜底，浏览器按顺序选择首个可解码格式播放；不支持多个src属性，仅识别第一个，而是语义化子标签，需正确设置type（如audio/mpeg）和路径大小写。
HTML 本身不支持“混合多种音频格式”播放同一段内容——但可以通过 <source></source> 标签为同一个 <audio></audio> 元素提供多格式兜底，让浏览器自动选一个能解码的播。 这不是切换，也不是并行加载，而是单次选择；写错顺序、漏 type、路径或 MIME 不匹配，就会直接跳过。
为什么必须用 <source></source> 而不是多个 src 属性？
一个 <audio></audio> 元素只认一个 src 属性。写成 <audio src="a.mp3"></audio> 是无效 HTML，浏览器只会取第一个 src 值（即 a.mp3），后面那个被忽略。而 <source></source> 是语义化子标签，专为“同内容、多格式”设计，浏览器按顺序尝试，遇到第一个能解码的就停。
<source></source> 的顺序和 type 属性怎么写才可靠？
顺序决定 fallback 优先级：把兼容性最广的放前面，比如 MP3；把只在特定浏览器支持的放后面，比如 OGG。但光靠顺序不够，type 必须准确，否则 Safari 可能全跳过。
-
type="audio/mpeg"对应.mp3（不是audio/mp3） -
type="audio/ogg"对应.ogg或.oga（不是audio/ogv） -
type="audio/webm"对应.webm（Opus 编码，非 VP8 视频轨） - 路径大小写敏感，尤其在 Linux 服务器或 CDN 上，
Sound.MP3≠sound.mp3
哪些组合实际能覆盖主流环境？
根据 2026 年实测数据，以下两种配置可稳定覆盖 Chrome、Firefox、Edge、Safari（macOS/iOS 14+）、Android WebView：
立即学习“前端免费学习笔记（深入）”；
✅ 推荐双格式（MP3 + WebM/Opus）：<audio controls></audio><source src="track.mp3" type="audio/mpeg"></source><source src="track.webm" type="audio/webm"></source>您的浏览器不支持 audio 元素。
⚠️ 慎用三格式（MP3 + OGG + WAV）：
WAV 文件体积大、加载慢，且 Safari 和多数 Android 浏览器根本不支持 audio/wav，加了反而拖慢 fallback 判断，还可能因 MIME 错误导致全部跳过。
容易被忽略的硬性限制
这个机制只对“同一音频内容的不同编码版本”有效。把十段不同语音塞进十个 <source></source>，浏览器仍只播第一个能解码的，其余九个不会加载、不会触发事件、也无法用 JS 控制切换——那是多个 <audio></audio> 标签的事。
另外，iOS Safari 对 preload="auto" 会强制降级为 "metadata"，哪怕你写了也不起作用；如果依赖元数据（如时长、封面），务必监听 loadedmetadata 事件，而不是假设 duration 一开始就有值。
