HTML5需用JavaScript实现播放列表功能，核心是数组存歌曲、索引定位置、变量控模式；自动切换靠ended事件，手动切换需pause-load-play流程，UI状态须显式同步。
HTML5 本身不提供原生播放列表功能，<audio> 标签一次只能加载并播放一个音频源。要实现“播完自动切下一首”“点击换歌”“支持顺序/循环/随机模式”，必须用 JavaScript 主动管理状态和流程。
核心结构：数组 + 索引 + 模式变量
所有歌曲路径或元数据统一存为数组，例如：
const playlist = ["song1.mp3", "song2.mp3", "song3.mp3"];
定义当前播放位置：
立即学习“前端免费学习笔记（深入）”；
let currentIndex = 0;
再加一个播放模式标识：
let playMode = 'list'; // 'list' | 'loop-all' | 'loop-one' | 'random'
这三者是整个逻辑的骨架，缺一不可。
自动切换靠 ended 事件触发
一首播完会发出 ended 事件，这是连播的关键入口：
- 绑定监听：
audio.addEventListener('ended', handleNext) - 在
handleNext()中按playMode分支处理：- 顺序播放：索引 +1；若超出长度，可暂停或跳回开头（取决于是否启用列表循环）
-
列表循环：用取模
currentIndex = (currentIndex + 1) % playlist.length -
单曲循环：不改索引，只重置时间点
audio.currentTime = 0; audio.play(); -
随机播放：生成新索引
currentIndex = Math.floor(Math.random() * playlist.length)
手动切换需完整重载流程
用户点击某首歌时，不能只改 src，否则可能卡顿、元数据丢失或 duration 不准：
- 先调
audio.pause() - 再设新地址：
audio.src = playlist[newIndex] - 强制重新加载元数据：
audio.load()（尤其影响timeupdate和duration） - 最后调
audio.play()
推荐复用同一个 <audio> 元素，避免频繁创建销毁 DOM 节点。
UI 同步与状态维护
播放模式没有浏览器内置状态，图标、按钮样式、提示文案都得靠 JS 显式同步：
- 点击循环按钮时，只更新
playMode变量 - 真正起作用的是
ended或手动切换时的判断分支 - 图标建议对应语义：两个箭头（列表循环）、单圈（单曲循环）、骰子（随机）
- 当前播放项在列表中高亮显示，可通过
data-index或 class 控制
