必须在设置audio.src后、play()前调用audio.load()以清空解码状态并重置元数据；需根据playMode（顺序/循环/随机）正确处理索引越界；按钮事件应通过addEventListener绑定并确保播放操作处于用户手势同步路径中。
点击按钮触发下一首时，必须调用 audio.load()
不加 audio.load() 是最常见的失效原因。仅改 audio.src 后直接 audio.play()，浏览器可能继续播上一首的缓冲数据，甚至 duration 仍显示旧值。只有 load() 才会清空当前解码状态、重抓元数据、重置 currentTime，让新音频真正“就位”。
- 必须在设置
audio.src后、play()前调用audio.load() - 若已处于播放中，
load()会自动暂停，所以后续要显式play() - 某些移动端（如 iOS Safari）对自动播放限制更严，
load()+ 用户手势触发的play()才能保证成功
nextTrack() 函数里索引越界处理不能只靠 % 运算
用 (currentIndex + 1) % playlist.length 确实能循环，但前提是你要明确“循环”是用户想要的行为。如果播放模式是“顺序播放且到末尾停止”，那这个取模就会偷偷跳回第一首，和预期不符。
- 先读取当前
playMode变量（比如'list'、'loop-all'、'random'） - 顺序模式下：判断
currentIndex === playlist.length - 1，是则audio.pause()并可选触发 UI 提示 - 循环模式下才用取模；随机模式则用
Math.floor(Math.random() * playlist.length) - 别忘了更新
currentIndex后同步刷新 UI（如高亮当前曲目项）
按钮绑定要避免内联 onclick 与全局函数混用
写 <button onclick="nextTrack()"> 看似简单，但容易因作用域或脚本加载顺序导致 nextTrack 未定义，尤其在模块化或延迟加载场景下。
- 推荐用
document.getElementById('nextBtn').addEventListener('click', nextTrack) - 确保 DOM 加载完成后再绑定，比如放在
DOMContentLoaded事件里 - 如果按钮是动态生成的（如从列表渲染），用事件委托更稳妥：
playlistContainer.addEventListener('click', e => { if (e.target.matches('[data-action="next"]')) nextTrack(); })
移动端点击下一首常卡住？检查是否漏了用户手势上下文
iOS 和部分 Android 浏览器要求 play() 必须由用户直接触发（如 click、touchend），且不能跨异步任务链。如果 nextTrack() 里有 setTimeout 或 Promise.then，再调 play() 就大概率失败。
立即学习“前端免费学习笔记（深入）”；
- 所有播放控制（包括
play()）必须出现在事件回调的同步执行路径上 - 避免在
fetch成功后自动切歌并播放——用户没点，不算有效手势 - 真要异步加载元数据，可先
audio.load()，等canplay事件再play()，但首次播放仍需用户点击启播
实际切换逻辑里最易被忽略的，是 load() 调用时机和播放模式状态的显式维护——这两处出错，按钮看起来点了，但什么都没发生。
