标签的type属性是浏览器解码开关，必须精准匹配：mp3用audio/mpeg（非audio/mp3），ogg需明确编码如audio/ogg; codecs=vorbis，且mp3源须排在ogg前以确保safari兼容；服务端content-type必须与type值完全一致。
HTML 中 <source></source> 标签的 type 属性不是可有可无的装饰，而是浏览器判断“能不能播”的第一道门槛。写成 audio/mpeg 或 audio/ogg 看似简单，但稍有偏差就会导致 Safari 静音、Firefox 卡加载、Chrome 直接跳过——关键不在“写了没”，而在“写得准不准”。
audio/mpeg 必须对应 MP3 文件，且不能写成 audio/mp3
MP3 的标准 MIME 类型是 audio/mpeg，不是 audio/mp3（后者无效）、audio/x-mpeg（部分旧服务端用，但现代浏览器不认）或 audio/mpeg3（完全错误）。浏览器看到 type="audio/mp3" 会直接忽略该 <source></source>，连请求都不发。
- ✅ 正确：
<source src="song.mp3" type="audio/mpeg"></source> - ❌ 错误：
<source src="song.mp3" type="audio/mp3"></source>、<source src="song.mp3" type="audio/mpeg3"></source> - ⚠️ 注意：MP3 文件本身需为标准编码（MPEG-1 Layer 3），避免用某些录音软件导出的非标封装，可用
ffprobe song.mp3验证输出含Audio: mp3
audio/ogg 不等于所有 .ogg 文件，必须明确编码
audio/ogg 是容器类型，真正决定能否播放的是内部音频编码。主流支持的是 Vorbis（不是 Opus，也不是 FLAC 封装在 .ogg 里）。只写 type="audio/ogg" 很危险：Chrome 可能返回 "maybe"，Safari 17+ 则直接返回空字符串，等于宣告不支持。
- ✅ 推荐写法：
<source src="song.ogg" type="audio/ogg; codecs=vorbis"></source> - ✅ 更稳妥（兼容 Opus 场景）：
<source src="song.opus" type="audio/ogg; codecs=opus"></source>（注意后缀应为 .opus） - ❌ 避免：
<source src="song.ogg" type="audio/ogg"></source>（缺 codecs）、<source src="song.ogg" type="audio/ogg; codecs=flac"></source>（FLAC 在 .ogg 容器中浏览器基本不支持） - ? 验证方式：控制台执行
new Audio().canPlayType('audio/ogg; codecs="vorbis"')，返回"probably"才算可靠
顺序决定成败：MP3 必须在 Ogg 前面
浏览器按 <source></source> 出现顺序逐个尝试，遇到第一个 canPlayType() 返回非空值的就立即加载，不再往后看。iOS Safari 和 macOS Safari 要求首个可播源必须是 H.264/MP3 级别，否则可能触发 NotAllowedError 或自动静音。
- ✅ 正确顺序：
<source src="song.mp3" type="audio/mpeg"><source src="song.ogg" type="audio/ogg; codecs=vorbis"></source></source> - ❌ 错误顺序：
<source src="song.ogg" type="audio/ogg; codecs=vorbis"><source src="song.mp3" type="audio/mpeg"></source></source>（Safari 可能跳过第一个、卡住或报错） - ? 补充：如果用了 Opus（.opus 文件），它比 MP3 效率高，但 Safari 不支持，所以 Opus 应放在 MP3 之后，或单独用于 Chrome/Firefox 场景
服务端 Content-Type 必须和 type 属性完全一致
前端写对了，服务端没配对，照样白搭。比如 .mp3 文件返回 Content-Type: text/plain，浏览器会当普通文本处理，根本不会调用音频解码器——DevTools 里看不到报错，只看到 loading 状态卡住。
- Apache 用户：在
.htaccess或虚拟主机配置中加AddType audio/mpeg .mp3和AddType audio/ogg .ogg - Nginx 用户：在
types块中加audio/mpeg mp3;和audio/ogg ogg;，并确保add_header Access-Control-Allow-Origin "*";（跨域必需） - ? 验证方法：终端运行
curl -I https://yoursite.com/song.mp3，确认响应头含Content-Type: audio/mpeg
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
