audio标签不支持音质选择，需用JS动态切换src并调load()重载；多source仅用于格式兼容而非音质分级；移动端需注意iOS Safari的播放限制及preload策略。

audio 标签本身不提供“音质选择”功能

HTML 的 audio 元素没有内置的「高清/标准/低码率」切换 UI，也不认识「音质」这个概念。它只负责加载并播放一个给定 URL 的音频流。所谓“不同音质”，实际是开发者准备的多个不同编码参数（如比特率、采样率、容器格式）的音频文件，再由 JS 控制切换 src 或替换 source 子节点实现的。

用 multiple source 实现格式兼容，不是音质分级

很多人误把多 source 当作音质选项，其实它只是浏览器按顺序找「第一个能解码的格式」，和质量无关：

• 和 放在一起，浏览器只会选第一个——哪怕第二个体积更小
• 要真正做音质分级，必须用 JS 动态改 audio.src，然后调 load() 重新加载
• 所有 source 必须带正确的 type，比如 MP3 是 audio/mpeg，不是 audio/mp3；OGG 是 audio/ogg，不是 audio/vorbis

手动实现音质切换：关键三步

用户点击「高清」按钮时，不能只改 src 就完事。需同步处理加载状态与错误边界：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 先调 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 中精度仅到秒级

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