本文详解如何通过点击链接动态切换音频源、自动停止前一首并播放新歌，解决因作用域导致的 `src` 更新失效问题，并提供可直接运行的完整代码方案。

要实现一个支持多首歌曲切换的轻量级 HTML 音频播放器，核心在于正确管理音频元素的 src 属性更新时机与播放控制逻辑。原始代码中，sfile 虽为全局变量，但 togglePlay() 在点击播放按钮时才执行，而此时 setfp() 已执行完毕——若用户未先点歌就直接点播放，sfile 仍为空字符串；更关键的是，togglePlay() 并未在设置新歌曲后立即触发播放，导致“选歌”和“播放”行为脱节。

以下是优化后的完整实现方案（无需 jQuery，兼容现代浏览器）：

✅ 正确结构：分离“选歌”与“播放”，确保状态同步

  ? Song 1

  ? Song 2

  ? Song 3



  
    ▶ Play
    
      
    
  

  

⚠️ 关键注意事项：

• href="#" 替代 href=""：避免页面跳转或刷新，确保 onclick 可靠执行；
• 移除 IIFE 封装：避免闭包导致变量作用域混乱，所有函数共享同一作用域下的 player 引用；
• .play() 必须由用户手势触发：现代浏览器禁止自动播放音频（尤其含声音的），因此 playSong() 中的 player.play() 可能被拦截——首次播放务必由用户点击按钮或链接触发（本方案中链接即用户手势）；
• preload="metadata"：提升加载效率，仅预加载元数据而非全部音频；
• player.currentTime = 0：确保切换歌曲时从头播放，避免残留进度；
• 错误处理：.play() 返回 Promise，需 .catch() 捕获自动播放策略拒绝（如 Safari/Chrome 移动端）。

✅ 进阶建议（可选）

• 使用 标签支持多格式（如 ogg 回退）；
• 添加播放进度条、音量控制、当前曲目显示等 UI；
• 将歌曲列表改为数组配置，配合 forEach 渲染，提升可维护性；
• 利用 data-src 属性存储路径，解耦 HTML 与 JS 路径逻辑。

该方案简洁、健壮、符合 Web 标准，彻底解决“点击歌曲无反应”“src 不更新”等常见问题，适合嵌入任何静态页面快速启用多曲目音频功能。