本文详解如何通过点击链接动态切换音频源、自动停止前一首并播放新歌，解决因作用域导致的 `src` 更新失效问题，并提供可直接运行的完整代码方案。
要实现一个支持多首歌曲切换的轻量级 HTML 音频播放器，核心在于正确管理音频元素的 src 属性更新时机与播放控制逻辑。原始代码中，sfile 虽为全局变量，但 togglePlay() 在点击播放按钮时才执行，而此时 setfp() 已执行完毕——若用户未先点歌就直接点播放，sfile 仍为空字符串；更关键的是，togglePlay() 并未在设置新歌曲后立即触发播放，导致“选歌”和“播放”行为脱节。
以下是优化后的完整实现方案（无需 jQuery，兼容现代浏览器）：
✅ 正确结构：分离“选歌”与“播放”，确保状态同步
? Song 1
? Song 2
? Song 3
⚠️ 关键注意事项：
- 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 不更新”等常见问题，适合嵌入任何静态页面快速启用多曲目音频功能。
