html5 标签支持的格式取决于浏览器解码能力，当前主流浏览器（chrome 126/firefox 127/safari 17.5）稳定支持的「容器+编码」组合极少：mp3仅限mpeg-1 layer iii（≤48 khz），ogg仅认opus或vorbis，wav仅支持16-bit pcm，m4a/mp4必须含aac-lc或alac；需按顺序fallback并精确声明type，服务端须配置正确mime、cors及range支持。
HTML <audio></audio> 标签本身不决定“支持什么格式”，真正起作用的是浏览器对特定「容器 + 编码」组合的解码能力。只写 .mp3 或 .wav 后缀没用，文件内部编码不对，照样报 MEDIA_ERR_DECODE。
哪些「容器+编码」组合实际能播
当前（2026 年中）主流浏览器稳定版（Chrome 126 / Firefox 127 / Safari 17.5）真正能解码的组合极少，不是所有同名后缀都等价：
-
.mp3：仅限 MPEG-1 Layer III，采样率 ≤48 kHz；HE-AAC、MP3 Surround、CBR/VBR 混合码率会静音或失败 -
.ogg：仅认 Opus（推荐）或 Vorbis；FLAC 封装在 .ogg 容器里 ≠ 可播放，Chrome 会拒绝 -
.wav：只支持 16-bit PCM little-endian（CD 格式）；μ-law、a-law、IEEE 754 浮点 WAV 全部不认 -
.m4a/.mp4：必须含 AAC-LC 或 ALAC；HE-AAC v2、AAC-HE、H.264 音频轨道会被跳过
验证方式很简单，在控制台执行：Audio.canPlayType('audio/ogg; codecs="opus"') —— 返回 "probably" 才算大概率可用。
为什么顺序不能随便写
浏览器按 <source></source> 出现顺序逐个尝试，一旦匹配 MIME + 编码就停止加载，不会继续往后看。这个顺序直接决定 fallback 是否生效：
- Safari 17.5 仍不识别
audio/ogg，哪怕你放第一个，它也会跳过audio.opus直接试第二个 - Chrome 对
audio/mp4; codecs="aac"的识别优先级低于audio/ogg; codecs="opus"，所以 Opus 应该放最前 - 如果把
.wav放第一位，Firefox 虽然支持，但用户得下载几 MB 文件才开始播，体验极差
推荐 fallback 顺序：<source src="a.opus" type="audio/ogg; codecs=opus"></source><source src="a.m4a" type="audio/mp4; codecs=aac"></source><source src="a.mp3" type="audio/mpeg"></source>
服务端配置比前端代码还关键
即使 HTML 写对了，服务端没配好，照样 404、静音、卡在 loading 状态：
-
Content-Type必须精确匹配，比如audio/ogg不能返回application/octet-stream - 必须开启
CORS（尤其跨域音频），否则 Safari 直接拒绝解码 - 必须支持
Range请求头，否则preload="metadata"无法读取时长，controls进度条无法拖动 - Nginx/Apache 需显式添加 MIME 类型映射，例如：
add_type audio/ogg .opus;
最容易被忽略的点：Opus 文件用 .ogg 后缀但声明 codecs="opus" 是安全的；但若用 .webm 后缀，就得改用 audio/webm; codecs="opus"，MIME 和后缀不必强绑定，但必须和实际内容一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
