本文详解 html audio + javascript 实现播放列表时，为何数组索引为 2 的音频总被跳过，并提供逻辑修正、健壮代码实现及关键注意事项。
本文详解 html audio + javascript 实现播放列表时，为何数组索引为 2 的音频总被跳过，并提供逻辑修正、健壮代码实现及关键注意事项。
问题根源并非浏览器 Bug 或音频文件异常，而是事件监听逻辑与索引更新时机存在竞态缺陷。在原代码中，ended 事件触发后立即执行 song_index++，随后判断 if (song_index —— 这导致当播放完索引 1（即第二首）后，song_index 变为 2，进入递归调用 playSong(playlist) 播放第 3 首（即 playlist[2]）；但紧接着该次播放结束时，song_index 再次自增为 3，此时条件 3 仍为真，于是未等待 playlist[2] 完成加载与播放，就已发起下一轮调用，而新调用中 song_index = 3 直接加载 playlist[3]，造成 playlist[2] “看似被跳过”。
更准确地说：playlist[2] 实际被加载并触发了 canplay，但由于 ended 回调中无防重入机制，且索引更新与递归调用耦合过紧，导致 audio_source.play() 被后续调用覆盖或中断。
✅ 正确做法是：确保每次播放完成后再安全推进索引，并严格分离“播放控制”与“索引管理”逻辑。以下是优化后的完整实现：
<audio id="audioPlayer"></audio><script>
const audioSource = document.getElementById('audioPlayer');
let playlist = ["track01.mp3", "track02.mp3", "track03.mp3", "track01.mp3"];
let songIndex = 0;
function playSong() {
if (songIndex >= playlist.length) {
songIndex = 0; // 循环回到开头
}
console.log(`${songIndex}: ${playlist[songIndex]}`);
audioSource.src = playlist[songIndex];
audioSource.load();
audioSource.addEventListener('canplay', () => {
audioSource.play().catch(e => console.warn("Playback failed:", e));
}, { once: true });
audioSource.addEventListener('ended', () => {
songIndex++; // 播放结束后才推进索引
playSong(); // 递归播放下一首（含越界自动重置）
}, { once: true });
}
// 启动播放
playSong();
</script>
? 关键改进点说明：
-
移除冗余参数传递：
playSong()不再接收playlist参数，避免闭包混乱，直接引用外部作用域的数组； -
使用
{ once: true }：确保每个canplay和ended事件监听器仅触发一次，防止重复绑定导致多次播放或索引错乱； -
索引检查前置化：在每次
playSong()开头统一处理越界逻辑（if (songIndex >= playlist.length) songIndex = 0），语义清晰且不易遗漏； -
错误捕获增强：
.play()返回 Promise，需.catch()处理自动播放策略拒绝（如用户未交互即调用）； -
无条件递归调用：
ended中直接调用playSong()，由函数首行逻辑保障循环正确性，消除原条件song_index 的边界误判风险（原逻辑错误地将songIndex === playlist.length视为有效索引）。
⚠️ 注意事项：
- 避免在
ended回调中重复添加事件监听器（原代码每次调用都addEventListener，导致监听器堆积）； - 不要依赖
console.log输出顺序判断执行流——浏览器事件队列、异步加载、Promise 状态等均可能影响日志时序； - 若需支持暂停/切换/进度条等功能，建议封装为类（如
AudioPlayer），用状态机管理playing/paused/loading等状态。
通过上述重构，播放列表将严格按索引顺序逐首执行，不再跳过任意一项（包括 playlist[2]），同时具备更好的可维护性与浏览器兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
