17370845950

HTML5 标签不转码，仅通过多格式 fallback 实现兼容；需按 MP3、M4A、OGG 顺序提供源，并正确配置 MIME 类型与服务端转码。

HTML5 的 标签本身不转码，只播放浏览器原生支持的格式；所谓“兼容”，本质是提供多格式 fallback，而非前端自动转码。

浏览器实际支持哪些音频格式

不同浏览器对 MP3、WAV、OGG、MP4（AAC） 的支持差异明显：

• MP3：Chrome、Edge、Safari 支持，Firefox 也支持（但部分旧版 Linux 发行版因专利问题默认禁用）
• OGG（Vorbis）：Firefox、Chrome、Edge 支持，Safari 完全不支持
• WAV（PCM）：全浏览器支持，但文件体积大、无压缩，仅适合短提示音
• MP4 容器 + AAC

  

  音频：Safari 和 iOS/iPadOS 必须用这个，Chrome/Edge 也支持，Firefox 支持度较新版本才稳定

多源 fallback 写法（最简兼容方案）

靠 标签按顺序尝试加载，浏览器跳过不支持的格式，直到匹配成功：

  
  
  
  Your browser does not support the audio element.

注意：type 属性不是可选的——省略后浏览器可能跳过该源或触发额外 HTTP 请求判断类型；.m4a 比 .mp4 更准确表达纯音频 MP4 容器，推荐使用。

服务端转码建议（非前端能解决）

如果上传的是用户任意格式（如 FLAC、WMA、AIFF），必须在服务端完成转码，前端无法绕过限制：

• 优先输出两套：一个 MP3（兼顾兼容性与体积），一个 M4A（AAC）（保障 Safari/iOS）
• 避免只转 OGG：看似开源友好，但 Safari 用户直接听不了，等于放弃 iOS 流量
• 用 ffmpeg 转码时注意 AAC 编码器选择：aac（内置）比 libfdk_aac 兼容性更好，后者需额外编译且部分环境不支持
• 采样率统一为 44100 Hz 或 48000 Hz，位深用 16，避免某些 Android WebView 对 24bit AAC 解析异常

常见错误现象与定位方法

遇到“音频不播放”，先别怀疑代码，检查控制台和网络面板：

• 控制台报错 DOMException: The element has no supported sources → 所有 的 type 均被浏览器忽略，大概率是 MIME 类型写错或服务器未正确返回 Content-Type
• Network 面板中某个 src 返回 404 或 415 → 路径错误，或服务器未配置对应 MIME 类型（如 Nginx 需加 types { audio/mpeg mp3; audio/mp4 m4a; audio/ogg ogg; }）
• 仅 Safari 不响，其他正常 → 几乎肯定是缺 m4a 源，或用了 MP3 但编码参数异常（如 VBR + 未设置 max bitrate）
• 移动端点一次没反应，要点第二次 → 可能是自动播放策略拦截，需绑定用户手势（如 click 后再调用 play()），和格式无关

真正卡住人的地方，往往不是“怎么写 ”，而是服务端没配对 MIME、CDN 缓存了错误的 Content-Type、或者以为转了 OGG 就万事大吉，却忘了 iOS 根本不吃这一套。