必须用source而非直接写src，因浏览器音频格式支持不一：MP3全兼容，OGG Safari不支持，WAV体积大且旧Edge解码失败；单src无法兜底，而source按顺序尝试首个可解码格式。
audio 标签里为什么必须用 source 而不是直接写 src？
因为浏览器对音频格式支持不一致：MP3 在所有主流浏览器都行，但 OGG 在 Safari 里不支持，WAV 文件太大且部分旧版 Edge 解码失败。直接给 <audio> 写 src 属性，浏览器只能加载一个文件，一旦格式不兼容就静音——而用多个 <source>，浏览器会按顺序试播，遇到第一个能解码的就停。
多 format 的 source 标签怎么写才不踩坑？
顺序很重要：把兼容性最广的放前面，比如 MP3；把体积小、压缩率高的（如 OGG）放中间；把原始无损但体积大、支持差的（如 WAV）放最后。浏览器不会预加载所有 <source>，只加载选中的那个。
-
type属性必须写准确，比如type="audio/mpeg"对应.mp3，type="audio/ogg"对应.ogg，漏写或写错（如写成audio/mp3）会导致该<source>被跳过 - 所有
<source>必须在<audio>开始标签和结束标签之间，不能放在外面，也不能嵌套其他元素 - 路径要统一相对或绝对，避免混用导致某个格式 404
常见错误现象和对应检查点
页面显示播放器但点不了、没声音、或只在 Chrome 行 Safari 不行——大概率是以下之一：
- 控制台报错
Failed to load resource: the server responded with a status of 404 (Not Found)→ 检查每个src对应的音频文件真实存在且路径正确 - 播放器显示“无法播放此媒体” → 查看开发者工具 Network 面板，看哪个
<source>被实际请求，再对比其type和响应头里的Content-Type是否匹配 - Safari 播不了 OGG → 正常，Safari 不支持
audio/ogg，它会自动跳过，只要前面有 MP3 就没问题；但如果 MP3 路径错了，就会卡住
一个最小可用示例
<audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> <source src="song.wav" type="audio/wav"> 您的浏览器不支持 audio 元素。 </audio>
注意：最后一行是 fallback 文本，仅当所有 <source> 都失败时才显示；controls 属性不能省，否则用户看不到播放控件；不要给 <audio> 加 src，否则会覆盖 <source> 的行为。
立即学习“前端免费学习笔记（深入）”；
实际部署时，OGG 和 MP3 通常够用，加 WAV 多半是为特殊需求留退路，但得接受它可能拖慢首播速度。
