用单个标签配合JS数组实现播放列表循环切换最稳定，核心是数组+索引+ended事件监听，通过currentIndex控制顺序循环、单曲循环或随机播放，并需状态锁防误操作及移动端兼容处理。
用单个 标签配合 JavaScript 数组管理歌曲，是实现播放列表循环切换最稳定、兼容性最好的方式。浏览器原生不支持“自动连播多首”，必须靠 JS 控制索引、监听事件、处理状态。
核心结构：数组 + 索引 + ended 事件
把所有音频路径存进一个数组，用一个变量（如 currentIndex）记住当前播到哪一首。每次切换或自动切歌，本质都是更新这个索引，再重新设置 audio.src 并调用 play()。
- 定义播放列表：
const playlist = ["song1.mp3", "song2.mp3", "song3.mp3"]; - 记录位置：
let currentIndex = 0; - 绑定自动切换：
audio.addEventListener("ended", handleNext);
循环切换的三种常见模式写法
“循环”不是指单曲重复，而是列表播完回到开头；真正要实现“列表循环”，关键在 handleNext 函数里怎么算下一个索引：
-
顺序循环（列表循环）：播完最后一首，自动回到第一首
→currentIndex = (currentIndex + 1) % playlist.length; -
单曲循环：只重复当前这一首
→ 不改currentIndex，直接audio.currentTime = 0; audio.play(); -
随机播放：下一首从列表中随机选
→currentIndex = Math.floor(Math.random() * playlist.length);
按钮点击切换时的关键操作流程
用户点“下一首”或点击歌单某一项，不能只改 src 就完事。必须确保前一首停掉、新资源加载就绪、播放顺利触发：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 先暂停当前播放：
audio.pause(); - 设置新地址：
audio.src = playlist[newIndex]; - 强制重新加载元数据（否则
duration可能为NaN）：audio.load(); - 再启动播放：
audio.play().catch(e => console.warn("播放失败", e));
移动端尤其要注意：play() 必须由用户真实点击触发，且首次播放建议用极短静音文件建立播放上下文，否则 iOS Safari 会拒绝播放。
防误操作与状态管理
快速连点、加载未完成就切歌，容易导致卡顿、空白或报错。加一个简单状态锁就能避免：
- 定义：
let isPlayingOrLoading = false; - 点击或
ended触发时，先判断：if (isPlayingOrLoading) return; - 进入逻辑前设为
true，播放成功或出错后重置为false
播放模式（顺序/单曲循环/随机）也得用一个变量（如 playMode = "list"）显式保存，UI 图标和切换逻辑都依赖它，不能靠猜测或 DOM 状态推断。
