audio的type属性只认标准容器mime类型（如audio/mpeg），不支持codecs参数；写错如audio/mp3会被浏览器静默跳过，且服务器content-type必须与type逐字符一致。
audio 的 type 属性不指定编码格式，只指定容器 MIME 类型
很多人误以为 type 可以写成 audio/mp3 或 audio/aac 来“声明编码”，但这是错的。HTML 规范里 <source></source> 的 type 属性只认标准 MIME 类型，且它描述的是**容器格式（container）**，不是内部音频编码器（codec）。MP3 文件对应的是 audio/mpeg，不是 audio/mp3；AAC 封装在 MP4 容器里时，应写 audio/mp4，而不是 audio/aac。
-
audio/mpeg→ .mp3 文件（MPEG-1/2 Audio Layer III 容器） -
audio/ogg→ .ogg 文件（Ogg container，通常含 Vorbis 或 Opus） -
audio/wav→ .wav（RIFF/WAV container，通常是 PCM） -
audio/webm→ .webm（WebM container，通常含 Opus 或 Vorbis） -
audio/mp4→ .m4a/.mp4（ISO Base Media File Format，含 AAC、ALAC 等）
写错如 type="audio/mp3" 或 type="audio/aac"，浏览器直接忽略该 <source></source>，既不请求也不报错——静默跳过。
想真正约束解码器？audio 不支持 codecs 参数
和 <video></video> 不同，<audio></audio> 的 <source></source> 标签**不支持 codecs 子参数**。你不能写 type="audio/mp4; codecs="mp4a.40.2"" —— 浏览器会当作非法值处理，等同于没写 type，或直接跳过该源。
- 所有主流浏览器（Chrome、Firefox、Safari、Edge）对
audio的type都只做容器级匹配，不校验内部 codec - 这意味着：一个
.m4a文件若实际是 ALAC 编码，但你写了type="audio/mp4"，Safari 仍可能加载并尝试播放（成功或失败取决于是否支持 ALAC） - 反之，若文件是 AAC 编码但封装在 Ogg 容器里（极罕见），写
type="audio/ogg"也会失败——因为浏览器按容器判断，不是按 codec
所以别在 audio 上折腾 codecs=，它不起作用，还可能引入兼容性风险。
怎么确认你的音频文件真实格式？别信后缀名
文件名叫 song.mp3，不等于它真是 MP3。常见翻车场景：用 FFmpeg 导出时选错封装格式，或编辑软件悄悄转了码。必须用工具验证真实容器和编码。
- 查容器类型：
ffprobe -v quiet -show_entries format=format_name -of default song.mp3→ 输出format_name=mpeg才是真 MP3 - 查音频流编码：
ffprobe -v quiet -show_entries stream=codec_name -of csv song.mp3→ 看第二列是否为"mp3" - 如果是
.m4a却输出format_name=ipod或format_name=mov,mp4,m4a，对应type="audio/mp4" - 如果是
.ogg但codec_name=opus，仍用type="audio/ogg"（Opus 在 Ogg 容器中合法）
服务器返回的 Content-Type 响应头也必须和 type 值逐字符一致。比如你写 type="audio/mpeg"，Nginx 就得配 add_header Content-Type audio/mpeg;，少个空格或大小写错误都会导致 Safari 拒绝加载。
多格式 fallback 顺序怎么排才靠谱
浏览器从上到下扫描 <source></source>，选第一个 type 被支持且资源可加载的。顺序错了，就可能绕过更小更快的格式，或在 Safari 上直接卡死。
- 推荐顺序：
audio/webm（现代、高压缩）→audio/ogg（Firefox 友好）→audio/mpeg（Safari/旧 IE 保底） - 但注意：Safari 16.4+ 才开始支持
audio/webm；16.0–16.3 及更早版本会跳过它，直接落到audio/mpeg - 千万别把
audio/mpeg放最后——万一前面两个路径 404 或type写错，整个音频就失效了 - 所有
src路径必须真实存在、可访问，且服务器配置了正确 MIME 类型响应头
最易被忽略的一点：本地开发用 file:// 协议时，type 匹配逻辑完全失效。必须起本地服务（如 npx serve 或 VS Code Live Server）才能真实测试 fallback 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
