HTML5 <audio> 标签不转码，仅通过多格式 fallback 实现兼容；需按 MP3、M4A、OGG 顺序提供源，并正确配置 MIME 类型与服务端转码。
HTML5 的 <audio> 标签本身不转码，只播放浏览器原生支持的格式；所谓“兼容”，本质是提供多格式 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 支持度较新版本才稳定
<audio> 多源 fallback 写法（最简兼容方案）
靠 <source> 标签按顺序尝试加载，浏览器跳过不支持的格式，直到匹配成功：
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.m4a" type="audio/mp4"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
注意：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→ 所有<source>的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()），和格式无关
真正卡住人的地方，往往不是“怎么写 <audio>”，而是服务端没配对 MIME、CDN 缓存了错误的 Content-Type、或者以为转了 OGG 就万事大吉，却忘了 iOS 根本不吃这一套。
