用单个元素配合javascript实现播放列表：通过js切换src或并调用load()和play()，避免多浪费资源；注意ios限制（如loop、volume不可js设置）、preload策略及autoplay策略限制。
怎么用 <audio></audio> 标签实现可切换的播放列表
纯 HTML 本身不支持“播放列表”逻辑，<audio></audio> 只能控制单个音频文件。所谓“HTML 播放列表”，实际是 HTML 提供容器 + JavaScript 控制切换。关键在于把多个 <source></source> 当成备选格式（同一首歌不同编码），而不是多首歌——那是常见误解。
正确做法是：用一个 <audio></audio> 元素，配合一组 <button></button> 或 <ul></ul> 列表，点击时用 JS 修改 src 属性或替换 <source></source> 的 src 后调用 load()。
- 别把多首歌塞进同一个
<audio></audio>的多个<source></source>里——浏览器只加载第一个能播的，其余被忽略 - 每次换歌后必须调用
audioElement.load()，否则可能沿用旧缓存或元数据 - 如果用
src属性直接赋值，记得之后调用play()才会自动播放（需用户手势触发）
preload 和 autoplay 在列表场景下的实际表现
这两个属性在播放列表里容易引发意料外行为：preload="auto" 会让浏览器预加载当前 src 的音频，但切换歌曲时不会自动预加载下一首；autoplay 在多数现代浏览器中被策略限制——只有用户已与页面交互（如点击）后，后续的 play() 调用才可能成功。
-
preload="metadata"更稳妥：只加载时长、封面等信息，适合列表页快速显示歌曲信息 - 不要依赖
autoplay实现“自动播下一首”，它大概率失败；改用用户点击或ended事件后手动调用play() - 移动端 Safari 对
preload支持有限，设为none反而更可控
为什么直接写死多个 <audio></audio> 标签不是好主意
有人会为每首歌写一个 <audio></audio> 并隐藏其他，靠显隐切换。这看似简单，但实际浪费资源、破坏语义、且难以同步状态（比如同时加载 10 首歌，内存和网络开销陡增）。
立即学习“前端免费学习笔记（深入）”；
- 每个
<audio></audio>即使display: none，只要src已设置，就可能触发预加载或解码 - 无法统一管理播放/暂停状态，比如“全局暂停”要遍历所有元素，易漏
- 屏幕阅读器会把所有
<audio></audio>当作独立媒体元素播报，影响无障碍体验 - 正确路径是单实例 + 数据驱动：用数组存歌曲信息，JS 控制唯一
<audio></audio>
兼容性坑：iOS Safari 不支持 loop 和 volume 的 JS 设置
iOS Safari 对 <audio></audio> 的控制权限极严。你可以在 HTML 里写 loop 属性，但 JS 设置 audio.loop = true 无效；同理，audio.volume = 0.5 在 iOS 上常被忽略，且无法通过 JS 获取真实音量值。
- 循环播放必须靠监听
ended事件后手动currentTime = 0; play(); - 音量控制建议放弃 JS 调节，改用系统原生控件（
controls属性）或 UI 按钮仅作示意 - 所有播放操作（包括自动播下一首）必须由用户真实点击触发，不能由定时器或
setTimeout发起
最麻烦的不是写不出功能，而是不同平台对同一段代码的响应差异太大——iOS、Chrome Android、桌面 Safari 的行为边界得一条条试出来，不能凭文档想当然。
