html5需用javascript实现多音频连续播放：通过数组存储歌曲、索引变量控制当前曲目，监听ended事件自动切歌，支持顺序、循环、随机等模式，手动切换需pause-load-play流程，并显式维护播放模式状态。
HTML5 本身不支持原生的多音频连续播放列表，<audio></audio> 标签一次只能加载并播放一个源。要实现“播放完一首自动播下一首”“点击切换歌曲”“支持循环/随机等模式”，必须靠 JavaScript 主动管理播放状态和索引逻辑。
核心：用数组 + 当前索引控制播放流
所有待播歌曲路径（或完整元数据）需预先存为数组，例如：
const playlist = ["song1.mp3", "song2.mp3", "song3.mp3"];- 定义一个变量如
let currentIndex = 0;记录当前正在播放哪一首 - 每次播放、切歌、下一曲、上一曲，本质都是更新
currentIndex，再调用audio.src = playlist[currentIndex]并play()
监听 ended 事件触发自动切换
当一首播完时，<audio></audio> 会触发 ended 事件——这是实现“顺序连播”的关键入口：
- 绑定监听：
audio.addEventListener('ended', handleNext) - 在
handleNext()中，根据当前播放模式决定下一步：- 顺序播放：索引 +1，若超限则暂停或跳回开头（取决于是否启用列表循环）
- 列表循环：取模运算
currentIndex = (currentIndex + 1) % playlist.length - 单曲循环：不改索引，直接
audio.currentTime = 0; audio.play(); - 随机播放：生成新索引
currentIndex = Math.floor(Math.random() * playlist.length)
手动切换需重置并重新加载
用户点击某首歌时，不能只改 src，还要确保播放器处于可响应状态：
- 先调用
audio.pause()停止当前播放 - 设置新地址：
audio.src = playlist[newIndex] - 调用
audio.load()强制重新加载元数据（尤其对 duration、timeupdate 等事件很重要） - 再
audio.play()启动播放 - 如果希望无缝切换（比如页面不刷新但播放不中断），建议复用同一个
<audio></audio>元素，避免频繁创建销毁
播放模式状态需显式维护
浏览器没有内置“播放模式”概念，所有模式（顺序/循环/随机）都靠 JS 变量+逻辑判断实现：
- 定义一个状态变量，如
let playMode = 'list'; // 'list' | 'loop-all' | 'loop-one' | 'random' - 切换按钮点击时，仅更新该变量，不立即执行动作；真正起作用的是
ended或手动切歌时的分支逻辑 - UI 上的循环图标（如两个箭头、单曲圆圈、骰子）应与
playMode同步更新，让用户明确当前行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
