OGG音频需配合正确的type属性（audio/ogg）和多格式回退（MP3优先）才能跨浏览器正常播放；Chrome等不支持file://协议下直接加载，且play()需用户交互或muted才有效。

直接插 标签加 ，且必须写对 type 值——audio/ogg，不是 audio/ogv 或 audio/ogg; codecs=vorbis（后者在多数浏览器里会被跳过）。

为什么单放 OGG 文件经常播不了？

Firefox 能原生解码 OGG，但 Chrome、Safari、Edge 默认不认或只在特定条件下支持。单独写 ，等于把兼容性押在 Firefox 上。用户用 Chrome 打开，控制条显示但点播放没反应，控制台可能静默失败，也可能报 DOMException: The element has no supported sources。

这不是路径问题，也不是文件损坏，是浏览器根本没尝试加载——因为没声明格式类型，或类型声明不被识别。

• type 属性不能省，也不能拼错：必须是 audio/ogg（全小写，无空格，无分号）
• OGG 文件本身得是纯 Vorbis 编码音频，不是带视频轨道的 .ogv；可用 ffprobe sound.ogg 确认流类型
• 直接双击 HTML 文件打开时，file:// 协议下 Chrome 会拒绝加载 OGG（报 net::ERR_FAILED），需起本地服务（如 python3 -m http.server）

多格式回退怎么写才真正生效？

浏览器按 出现顺序逐个检查，遇到第一个能解码的就停，后续全部忽略。所以顺序 = 兼容优先级。

推荐写法（MP3 优先兜底）：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

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

关键点：

• MP3 的 type 必须是 audio/mpeg，不是 audio/mp3（无效值）
• OGG 的 type 必须是 audio/ogg，加 codecs 参数（如 audio/ogg; codecs=vorbis）反而降低兼容性
• WAV 文件体积大、不压缩，仅作最后 fallback，别放第一位
• 所有 src 路径必须可访问，大小写敏感，建议统一小写命名

JS 控制 OGG 播放时容易卡在哪？

调用 play() 报 NotAllowedError 是最常见问题——不是 OGG 特有，但因 OGG 多用于轻量音效，常被误以为“小文件就能自动播”。其实规则一样：现代浏览器禁止无声交互前的自动播放，除非已 muted。

正确做法：

• HTML 中加 muted 属性：，再 JS 调 play() 才大概率成功
• 如果必须带声播放，先等用户点击事件触发，再调 play()；setTimeout 模拟点击无效
• Ogg 文件加载慢时，play() 可能立即 reject，需监听 canplay 或 loadeddata 事件后再调
• Firefox 对 play() 的 Promise 返回更严格，未 resolve 就调 pause() 可能抛错

OGG 不是“备选格式”，而是 Firefox 用户体验的关键一环；但它从来不是孤军奋战的格式——脱离 MP3 回退、脱离 type 规范、脱离用户交互时机，就只剩一个安静的标签。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！