audio标签不支持音质选择，需用JS动态切换src并调load()重载；多source仅用于格式兼容而非音质分级；移动端需注意iOS Safari的播放限制及preload策略。
audio 标签本身不提供“音质选择”功能
HTML 的 audio 元素没有内置的「高清/标准/低码率」切换 UI，也不认识「音质」这个概念。它只负责加载并播放一个给定 URL 的音频流。所谓“不同音质”，实际是开发者准备的多个不同编码参数（如比特率、采样率、容器格式）的音频文件，再由 JS 控制切换 src 或替换 source 子节点实现的。
用 multiple source 实现格式兼容，不是音质分级
很多人误把多 source 当作音质选项，其实它只是浏览器按顺序找「第一个能解码的格式」，和质量无关：
-
<source src="song-high.mp3" type="audio/mpeg"></source>和<source src="song-low.mp3" type="audio/mpeg"></source>放在一起，浏览器只会选第一个——哪怕第二个体积更小 - 要真正做音质分级，必须用 JS 动态改
audio.src，然后调load()重新加载 - 所有
source必须带正确的type，比如 MP3 是audio/mpeg，不是audio/mp3；OGG 是audio/ogg，不是audio/vorbis
手动实现音质切换：关键三步
用户点击「高清」按钮时，不能只改 src 就完事。需同步处理加载状态与错误边界：
- 先调
audio.pause()，避免正在播放时切换导致异常 - 设新
src后立刻调audio.load()，否则部分浏览器（尤其是 Safari）不会触发重新加载 - 监听
canplaythrough事件再调play()，别在loadeddata或canplay就启动——前者可能缓冲不足，后者在 iOS 上常被策略拦截 - 务必
.catch(e => console.warn('play failed:', e))，因为即使用户已交互过，iOS Safari 仍可能在换源后拒绝自动播放
容易被忽略的兼容性硬伤
音质切换在移动端尤其脆弱：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 不允许 JS 在无用户手势上下文中触发任何音频播放，哪怕刚点过「高清」按钮，换源后的
play()仍可能被静默拒绝——必须确保该次play()调用链直接来自click或touchend回调内 - Android Chrome 对
preload="none"下的换源支持不稳定，建议统一用preload="metadata"，减少首次加载延迟 - 不要依赖
audio.buffered判断是否可播，它在 Firefox 中返回空对象，在 Safari 中精度仅到秒级
