audio标签实现格式回退需按兼容性从低到高排列source，准确声明type（如audio/ogg、audio/mpeg、audio/wav），确保服务端Content-Type匹配且支持范围请求，iOS不支持OGG/FLAC，须用用户手势触发播放。
audio 标签里怎么写多个 source 实现格式回退
浏览器不支持某一种音频编码时，会自动跳到下一个 source 尝试加载——前提是顺序写对、type 声明准确。不是随便堆几个 source 就能生效。
常见错误是漏写 type 属性，或写错 MIME 类型（比如把 audio/mpeg 写成 audio/mp3），导致浏览器直接跳过该 source，甚至只加载第一个就报错。
-
type必须写，且优先用标准 MIME 类型：audio/mpeg（MP3）、audio/ogg（OGG/Vorbis）、audio/wav（WAV）、audio/flac（FLAC） - 推荐按兼容性从低到高排序：先放现代格式（如
audio/ogg），再放广泛支持的audio/mpeg，最后可加一个audio/wav保底（但注意体积大） - 所有
source的src路径必须可访问，404 会导致该条被跳过，不报明显错误，容易误判为“没回退”
<audio controls><source src="track.ogg" type="audio/ogg"><source src="track.mp3" type="audio/mpeg"><source src="track.wav" type="audio/wav"> Your browser does not support the audio element. </source></source></source></audio>
怎么让音轨显示正确标题和作者信息
HTML 原生 audio 标签不解析 ID3 或 Vorbis Comment 元数据，title、artist 这类信息不会自动读取并显示。想在播放控件里看到名称，只能靠属性或 JS 补充。
-
aria-label是最轻量的方案，用于屏幕阅读器和部分浏览器显示提示文字，例如：aria-label="夏日午后 - 独立音乐人小陈" - 如果需要在 UI 上显式展示，得自己写 DOM：用
配合 JS 监听loadedmetadata事件，再手动填入（但注意：这个事件不提供 ID3 数据，只是触发时机） - 真正读取音轨内嵌元数据，必须用 JS 解析二进制（如
music-metadata库），成本高、性能差，一般只在上传后预处理或桌面端场景用
为什么加了多个 source 还是只加载第一个
典型表现是 Network 面板里只看到一个请求，控制台无报错，但换格式后依然无法播放——问题往往不在 HTML 结构，而在服务端或路径本身。
- 检查响应头：
Content-Type必须与source的type一致，否则浏览器可能拒绝加载（尤其 Safari 对 MIME 类型校验严格） - 确认服务器是否支持范围请求（
Accept-Ranges: bytes），缺失会导致某些浏览器（如 iOS Safari）拒绝播放 MP3/Ogg - 避免使用 query 参数动态生成音频 URL（如
track.mp3?t=123），部分浏览器缓存策略或预加载逻辑会出问题 - 不要在
source外层套picture或其他语义标签——audio只接受source和文本 fallback，嵌套非法标签会中断解析
移动端 iOS Safari 播放失败的硬性限制
iOS Safari 对 audio 的自动播放、格式支持、加载行为有额外约束，不是加了 source 就万事大吉。
- 必须由用户手势（如
click、touchend）触发play()，不能在DOMContentLoaded或load里直接调；autoplay属性基本无效 - MP3 支持没问题，但 OGG 在 iOS 全系不支持（包括最新 iOS 17），写了也白写；FLAC 同样不支持
- 如果音频文件大于 5MB，iOS 可能因内存限制静音加载失败，建议压缩或分段
- 用
canPlayType()主动检测比依赖回退更可靠：audio.canPlayType('audio/mpeg')返回"probably"或"maybe"才值得加载
实际项目里最容易被忽略的是服务端响应头和 iOS 的 OGG 兼容性——写十行 source 不如先 curl 一下 MP3 响应头，再查一遍 iOS 支持表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
