用标签实现多音频顺序播放需JavaScript监听ended事件，手动切换src并调用play()；须确保用户交互触发、每次切换前调用load()、重置currentTime=0，用数组管理路径；new Audio()不可直接播放，MediaSession需手动处理播放逻辑且兼容性有限；preload="metadata"不预加载音频主体，真预加载需fetch+createObjectURL。
怎么用 <audio></audio> 标签实现多个音频文件顺序播放
原生 <audio></audio> 不支持内置播放列表，必须靠 JavaScript 控制切换和自动续播。核心是监听 ended 事件，手动加载下一个 src 并调用 play()。
常见错误现象：play() 被静音策略拦截（尤其在非用户交互后）、切换时卡顿、currentTime 没重置导致从中间开始播。
- 播放前确保当前
<audio></audio>元素已获得用户交互（如点击按钮触发首次播放） - 每次切换前调用
load()，否则部分浏览器可能复用旧解码器状态，引发异常 - 设
audio.currentTime = 0再play()，避免上一曲残留时间影响 - 用数组管理路径，用索引跟踪当前项，不要依赖 DOM 顺序或
data-*属性动态读取（易错且慢）
Audio 构造函数 + play() 链式调用为什么失败
直接 new Audio(src) 后立刻 play() 几乎必失败——它不绑定到页面上下文，缺少用户激活信号，且无法监听 ended。
使用场景仅限预加载或检测格式支持（canPlayType()），不能替代页面内 <audio></audio> 元素做播放控制。
立即学习“前端免费学习笔记（深入）”；
-
new Audio()创建的实例没有 DOM 节点，addEventListener('ended', ...)无效 - 移动端 Safari 对非 DOM 绑定音频的
play()直接抛NotAllowedError - 若需后台预加载，用
fetch()+ArrayBuffer缓存，但播放仍需注入<audio></audio>元素
用 MediaSession 管理多曲播放时容易漏掉什么
MediaSession 能让系统媒体控件显示曲名、支持快进/跳过，但它不负责播放逻辑——只是“贴标签”，所有跳曲、暂停、进度更新仍要自己写。
兼容性注意：Chrome ≥ 73、Edge ≥ 79 支持完整 API；Firefox 仅部分支持（无 setActionHandler）；Safari 完全不支持。
- 必须在用户交互后（如 click）才可调用
navigator.mediaSession.setActionHandler()，否则静默失败 -
mediaSession.metadata必须是MediaMetadata实例，传普通对象会报错TypeError: Illegal constructor - 跳曲时需同步更新
mediaSession.positionState（含duration、playbackRate），否则锁屏界面进度条不动
为什么用 preload="metadata" 但首曲还是延迟加载
preload="metadata" 只保证获取时长、封面等元数据，不提前下载音频主体。真正解码和缓冲仍发生在 play() 调用时。
性能影响明显：Wi-Fi 下感知弱，4G 或弱网下首曲等待超 1 秒很常见；连续切换时，未预加载的下一曲必然卡顿。
- 想真预加载，得用
fetch(src).then(r => r.arrayBuffer())+URL.createObjectURL()，再赋给audio.src - 但注意内存：大量音频缓存会触发 Chrome 的
DOMException: QuotaExceededError - 更稳妥的做法是只预加载当前曲 + 下一曲（双缓冲），其余保持
preload="none"
事情说清了就结束。多文件播放最麻烦的从来不是“怎么列出来”，而是每个环节都卡在浏览器策略边缘——用户交互时机、加载状态判断、错误恢复路径，少盯住一个，列表就断在第三首。
