HTML的<audio>标签需结合JavaScript实现播放列表功能：用数组存储音频路径，监听ended事件按顺序/循环/随机模式切换歌曲，并注意自动播放策略与状态管理。
HTML 的 <audio> 标签本身不直接支持播放列表、循环切换或随机播放逻辑，这些功能需要结合 JavaScript 实现。核心思路是：用数组管理音频文件路径，通过监听 ended 事件触发下一首，并用状态变量控制循环模式（顺序/循环/随机）。
准备播放列表数据
先定义一个音频路径数组，可包含本地路径或在线 URL：
const playlist = [ "song1.mp3", "song2.mp3", "song3.mp3" ];
同时初始化当前索引和播放模式：
- 顺序播放：索引递增，到末尾停止或回到开头（取决于是否启用循环）
- 循环播放：到达末尾后自动跳回索引 0
- 随机播放：每次选一个不等于当前索引的随机位置（避免连播同一首）
绑定 ended 事件实现自动切换
监听音频自然结束事件，在回调中根据模式加载下一首：
立即学习“前端免费学习笔记（深入）”；
const audio = document.querySelector("audio");
<p>audio.addEventListener("ended", () => {
let nextIndex;</p><p>if (loopMode === "random") {
do {
nextIndex = Math.floor(Math.random() * playlist.length);
} while (nextIndex === currentIndex); // 避免重复
} else if (loopMode === "loop") {
nextIndex = (currentIndex + 1) % playlist.length;
} else {
nextIndex = currentIndex + 1;
if (nextIndex >= playlist.length) return; // 顺序播放到末尾停止
}</p><p>currentIndex = nextIndex;
audio.src = playlist[currentIndex];
audio.play();
});控制循环与随机模式的开关
用布尔变量或字符串标识当前模式，配合按钮动态切换：
- 设置
loopMode = "normal"（顺序）、"loop"（列表循环）、"random"（随机） - 点击按钮时更新变量，无需重置播放器，下次
ended触发即生效 - 也可结合
audio.loop属性控制单曲循环（仅影响当前音频，非整个列表）
补充实用细节
提升体验的小技巧：
- 加载新音频前调用
audio.pause()和清空audio.src，避免残留音频或错误状态 - 使用
audio.load()确保元数据就绪后再play()，减少兼容性问题 - 为防止自动播放被浏览器拦截，首次播放必须由用户手势（如点击按钮）触发
- 可添加当前播放序号显示、进度条同步、静音/音量控制等增强交互
