本文详解如何通过点击链接动态切换音频源、自动停止前一首并播放新歌，解决因作用域导致的 `src` 更新失效问题，并提供可直接运行的完整代码方案。
要实现一个支持多首歌曲切换的轻量级 HTML 音频播放器，核心在于正确管理音频元素的 src 属性更新时机与播放控制逻辑。原始代码中，sfile 虽为全局变量，但 togglePlay() 在点击播放按钮时才执行，而此时 setfp() 已执行完毕——若用户未先点歌就直接点播放，sfile 仍为空字符串；更关键的是，togglePlay() 并未在设置新歌曲后立即触发播放，导致“选歌”和“播放”行为脱节。
以下是优化后的完整实现方案（无需 jQuery，兼容现代浏览器）：
✅ 正确结构：分离“选歌”与“播放”，确保状态同步
<body>
<a href="#" onclick="playSong(1)">? Song 1</a><br>
<a href="#" onclick="playSong(2)">? Song 2</a><br>
<a href="#" onclick="playSong(3)">? Song 3</a><br><br>
<div class="audio-player">
<button id="play-btn">▶ Play</button>
<div class="audio-wrapper">
<audio id="player" preload="metadata"></audio>
</div>
</div>
<script>
const player = document.getElementById('player');
const playBtn = document.getElementById('play-btn');
// 播放/暂停主逻辑（可复用）
function togglePlay() {
if (player.paused) {
player.play().catch(e => console.warn("Playback failed:", e));
playBtn.textContent = "⏸ Pause";
} else {
player.pause();
playBtn.textContent = "▶ Play";
}
}
// 点击歌曲链接：设置新源 + 自动播放（含暂停前一首）
function playSong(songNumber) {
const newSrc = `./sf/${songNumber}.mp3`;
// 先暂停当前播放（避免多音轨叠加）
if (!player.paused) player.pause();
// 更新 src 并重置播放位置（防止从中间开始）
player.src = newSrc;
player.currentTime = 0;
// 自动尝试播放（现代浏览器需用户手势触发）
player.play().catch(e => {
console.error("Auto-play blocked. User must interact first.", e);
alert("Please click 'Play' to start playback.");
});
playBtn.textContent = "⏸ Pause";
}
// 绑定播放按钮事件
playBtn.addEventListener('click', togglePlay);
// 可选：支持空音频初始化时显示提示
player.addEventListener('emptied', () => {
playBtn.textContent = "▶ Play (no song selected)";
});
</script>
</body>⚠️ 关键注意事项：
- href="#" 替代 href=""：避免页面跳转或刷新，确保 onclick 可靠执行；
- 移除 IIFE 封装：避免闭包导致变量作用域混乱，所有函数共享同一作用域下的 player 引用；
- .play() 必须由用户手势触发：现代浏览器禁止自动播放音频（尤其含声音的），因此 playSong() 中的 player.play() 可能被拦截——首次播放务必由用户点击按钮或链接触发（本方案中链接即用户手势）；
- preload="metadata"：提升加载效率，仅预加载元数据而非全部音频；
- player.currentTime = 0：确保切换歌曲时从头播放，避免残留进度；
- 错误处理：.play() 返回 Promise，需 .catch() 捕获自动播放策略拒绝（如 Safari/Chrome 移动端）。
✅ 进阶建议（可选）
- 使用 <source> 标签支持多格式（如 ogg 回退）；
- 添加播放进度条、音量控制、当前曲目显示等 UI；
- 将歌曲列表改为数组配置，配合 forEach 渲染，提升可维护性；
- 利用 data-src 属性存储路径，解耦 HTML 与 JS 路径逻辑。
该方案简洁、健壮、符合 Web 标准，彻底解决“点击歌曲无反应”“src 不更新”等常见问题，适合嵌入任何静态页面快速启用多曲目音频功能。
