必须用<source>嵌套在<audio>里并配MP3回退，因Safari等浏览器不支持audio/ogg且单写src无fallback；type属性必须准确声明为audio/ogg或audio/mpeg，本地file://协议下OGG会加载失败，需用HTTP服务测试。
必须用 <source> 嵌套在 <audio> 里，不能只写 src 属性；单独放 .ogg 文件大概率播不了，得配 MP3 回退。
为什么单写 src="xxx.ogg" 经常不工作
浏览器对 OGG 的支持其实很“挑”：Firefox 原生认，Chrome 大多也支持，但 Safari（尤其旧版 iOS）基本不认 audio/ogg。更关键的是，<audio src="song.ogg" controls></audio> 这种写法，一旦浏览器不支持 OGG，就直接卡住——不会报错，也不会 fallback，用户看到的只是个灰色控制条，点不动。
- 不是文件坏了，是浏览器根本没解码能力
- type MIME 类型没声明，部分浏览器会跳过该源（哪怕它其实能播）
- 路径带空格、大小写不一致、服务器没配
audio/oggMIME 类型，都会导致 404 或ERR_CONTENT_DECODING_FAILED
<source> 的 type 属性必须写对
type 不是可选项，也不是随便写。写错等于白写：
- ✅ 正确：
type="audio/ogg"（OGG/Vorbis） - ❌ 错误：
type="audio/ogv"、type="audio/ogg-vorbis"、type="audio/ogg"（少引号或空格） - MP3 对应的是
type="audio/mpeg"，不是audio/mp3
示例结构：
立即学习“前端免费学习笔记（深入）”；
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </audio>
本地双击打开 HTML 时 OGG 加载失败？这是 file:// 协议限制
Chrome、Firefox 在直接双击打开 HTML（即地址栏显示 file:///）时，会拒绝加载 <source> 中的 OGG（和 MP3 一样），控制台报 net::ERR_FILE_NOT_FOUND 或静默失败。
- 解决方法：起一个本地 HTTP 服务，比如终端执行
python3 -m http.server 8000，然后访问http://localhost:8000/your-page.html - 不要依赖 “右键 → 在浏览器中打开”，那个本质还是
file:// - 开发阶段就养成用本地服务的习惯，避免上线前才发现音频全黑
OGG 文件怎么生成？别手动改后缀
把 .mp3 文件直接重命名为 .ogg 是无效的——格式没变，只是骗了文件名。真正可用的 OGG 需用编码器转：
- 推荐命令（需安装 ffmpeg）：
ffmpeg -i input.mp3 -c:a libvorbis -q:a 4 output.ogg -
-q:a 4是质量参数（0–10），4 是听感接近 MP3 192kbps 的常用值 - 验证是否成功：用 VLC 打开
output.ogg，看“工具 → 编解码信息”里是否显示Vorbis音频流
真正容易被忽略的点是：OGG 不是“兼容性补丁”，而是 Firefox 用户的刚需通道。你省掉它，等于默认放弃一部分稳定、注重开源标准的用户群——而且这个群体往往对网页技术细节更敏感，更容易发现并吐槽问题。
