HTML网页如何插入OGG音频-html教程-PHP中文网

必须用嵌套在里并配mp3回退，因safari等浏览器不支持audio/ogg且单写src无fallback；type属性必须准确声明为audio/ogg或audio/mpeg，本地file://协议下ogg会加载失败，需用http服务测试。

html网页如何插入ogg音频

必须用 <source></source> 嵌套在 <audio></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/ogg MIME 类型，都会导致 404 或 ERR_CONTENT_DECODING_FAILED

`<source></source>` 的 type 属性必须写对

type 不是可选项，也不是随便写。写错等于白写：

✅ 正确：type="audio/ogg"（OGG/Vorbis）
❌ 错误：type="audio/ogv"、type="audio/ogg-vorbis"、type="audio/ogg"（少引号或空格）
MP3 对应的是 type="audio/mpeg"，不是 audio/mp3

示例结构：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

<audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg">
  您的浏览器不支持 audio 元素。
</source></source></audio>

本地双击打开 HTML 时 OGG 加载失败？这是 file:// 协议限制

Chrome、Firefox 在直接双击打开 HTML（即地址栏显示 file:///）时，会拒绝加载 <source></source> 中的 OGG（和 MP3 一样），控制台报 net::ERR_FILE_NOT_FOUND 或静默失败。

解决方法：起一个本地 HTTP 服务，比如终端执行 python3 -m http.server 8000，然后访问 http://localhost:8000/your-page.html
不要依赖 “右键 → 在浏览器中打开”，那个本质还是 file://
开发阶段就养成用本地服务的习惯，避免上线前才发现音频全黑