最简最稳的多格式兼容方案是按兼容性从高到低排列多个标签：MP3（audio/mpeg）、OPUS（audio/opus）、OGG/Vorbis（audio/ogg; codecs="vorbis"）、WAV（audio/wav），type属性须准确，末尾加fallback提示和下载链接，并推荐preload="metadata"与controls搭配使用。
直接用多个 <source></source> 标签嵌套在 <audio></audio> 里，按兼容性从高到低排列，并为每个写准 type 属性——这是最简、最稳的多格式兼容方案。
格式顺序要讲优先级
浏览器严格按 HTML 中 <source></source> 的书写顺序尝试加载，只取第一个能解码播放的。所以要把支持面最广、质量又好的格式放最前：
-
MP3（
audio/mpeg）：所有现代浏览器都支持，兼容性最强，适合放第一位 -
OPUS（
audio/opus）：现代浏览器（Chrome/Firefox/Edge）高效压缩格式，体积小音质好，可放第二位 -
OGG/Vorbis（
audio/ogg; codecs="vorbis"）：Firefox 和旧版 Chrome 偏好，但 Safari 不支持，建议放第三 -
WAV（
audio/wav）：无损、体积大、兼容性好，但别放最后——万一前面都因路径或 MIME 错误被跳过，会误触发“不支持”提示
type 属性不能省，也不能写错
type 不是装饰，是浏览器跳过不支持格式的关键依据。只写后缀（如 type="audio/mp3"）或宽泛类型（如 type="audio/mp4"）容易失效：
- ✅ 正确写法：
type="audio/mpeg"（MP3）、type="audio/ogg; codecs="vorbis"（OGG）、type="audio/opus" - ❌ 错误写法：
type="audio/mp3"（非标准 MIME）、type="audio/mp4"（Safari 要求 AAC 编码，仅后缀无法识别） - ⚠️ 注意：Safari 对
audio/mp4实际要求封装为 .m4a 且编码为 AAC，可用ffprobe确认codec_name是aac
加 fallback 提示和降级手段
即使有多个 <source></source>，仍需兜底：
立即学习“前端免费学习笔记（深入）”；
- 在
<audio></audio>内部末尾写一段普通文本，比如您的浏览器不支持音频播放，它只在完全不支持<audio></audio>标签时显示 - 若需更精细控制（例如全部
<source></source>都加载失败），可用 JavaScript 监听error事件：audio.addEventListener('error', () => { /* 切换备用方案或提示 */ }) - 想兼顾老旧环境，可在最后加个
<a href="song.mp3">点击下载音频</a>，提供手动获取途径
preload 和 controls 的实用搭配
这两个属性影响首屏体验和用户操作：
-
preload="metadata"推荐加上——它只预加载时长、封面等元信息，不拉音频本体，加快控件就绪速度，尤其对移动端友好 -
controls开启原生控件最省事，但注意：iOS Safari 强制需用户手势才能播放（不能靠autoplay触发）；Android WebView 对input[type="file"]的 MIME 校验更严 - 如果要做自定义 UI，不要依赖内置控件，改用
play()、pause()、currentTime等 API 控制，进度条更新推荐用requestAnimationFrame替代setInterval
