本文解析javascript控制html audio实现播放列表时，为何数组索引为2的音频总被跳过，并提供精准修复逻辑、完整可运行代码及关键注意事项。

本文解析javascript控制html audio实现播放列表时，为何数组索引为2的音频总被跳过，并提供精准修复逻辑、完整可运行代码及关键注意事项。

问题本质并非媒体加载失败或浏览器兼容性问题，而是递归播放逻辑中的边界条件错误。在原始代码中，ended 事件监听器内使用了：

song_index === 2

• 必须移除旧事件监听器：否则每次 playSong() 调用都会新增 ended 和 canplay 监听器，导致多次触发、状态混乱；
• load() 不可省略：确保音频源更新后重新加载元数据与缓冲区；
• play() 需捕获异常：现代浏览器要求用户手势触发播放，自动播放可能被拒绝；
• 边界校验前置：在 playSong() 开头验证 song_index 有效性，提升鲁棒性。

此方案确保播放列表严格按索引顺序执行，无跳帧、无遗漏，适用于任意长度的合法音频数组。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！