本文介绍一种简洁可靠的方案，通过全局变量配合函数调用顺序，实现在单个 `
要构建一个轻量但功能完整的多曲目音频播放器，核心在于确保音频源（src）更新与播放逻辑严格同步，并避免因作用域或执行时序问题导致状态丢失。原始代码中 sfile 虽为全局变量，但 togglePlay() 在点击播放按钮时才执行，而此时 setfp() 设置的路径可能已被后续操作覆盖或尚未生效（尤其在未触发播放时），更关键的是：togglePlay() 并不感知“用户意图切换歌曲”这一动作——它只响应播放/暂停，却未主动加载新资源。
✅ 正确做法是：将“设置音源 + 播放”逻辑统一入口化。即点击歌曲链接时，不仅更新 src，立即触发播放（或继续/恢复），而非等待用户二次点击播放按钮。这既符合用户直觉，也彻底规避了变量状态不同步问题。
以下是优化后的完整实现：
✅ HTML 结构（精简可靠）
<body>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="playSong(1)">? Song 1</a><br>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="playSong(2)">? Song 2</a><br>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="playSong(3)">? Song 3</a><br>
<div class="audio-player">
<button id="play-btn">▶ Play / ⏸ Pause</button>
<div class="audio-wrapper" id="player-container">
<audio id="player" preload="metadata"></audio>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
// ? 全局音频实例，复用同一元素
const player = document.getElementById('player');
let currentSrc = '';
// 主播放函数：设置源 → 加载 → 播放/暂停
function playSong(songNumber) {
const newSrc = `./sf/${songNumber}.mp3`;
if (newSrc === currentSrc && !player.paused) {
player.pause();
$('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bplay-btn').text('▶ Play');
} else {
currentSrc = newSrc;
player.src = newSrc;
player.load(); // 显式加载新资源，确保 readyState 更新
player.play().catch(e => console.warn("Playback prevented:", e));
$('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bplay-btn').text('⏸ Pause');
}
}
// 播放按钮独立控制（可选：保留手动播放能力）
document.getElementById('play-btn').addEventListener('click', () => {
if (player.paused) {
player.play().catch(e => console.warn("Resume failed:", e));
$('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bplay-btn').text('⏸ Pause');
} else {
player.pause();
$('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bplay-btn').text('▶ Play');
}
});
// 可选：监听音频自然结束，自动重置按钮文本
player.addEventListener('ended', () => {
$('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bplay-btn').text('▶ Play');
});
</script>
</body>? 关键改进说明：
- 移除冗余 IIFE 和闭包作用域陷阱：所有逻辑在统一作用域下运行，player 和 currentSrc 状态清晰可控；
- playSong() 一气呵成：设置 src → load() → play()，避免因浏览器延迟加载导致 play() 失败；
- 智能状态判断：若点击当前已播放曲目，直接暂停；否则加载新曲目并播放；
- 错误防御：.play() 返回 Promise，需 .catch() 捕获自动播放策略限制（如无用户交互时静音启动）；
- 语义化按钮文案：实时反映播放状态，提升用户体验；
- preload="metadata"：加快首帧加载，平衡性能与初始加载时间。
⚠️ 注意事项：
- 确保 ./sf/1.mp3 等路径真实存在且服务端允许跨域访问（开发时建议使用本地服务器如 live-server，而非直接打开 file://）；
- 移动端浏览器普遍禁止无用户手势触发的自动播放（如页面加载时），但由 <a> 或 <button> 点击触发的 play() 是被允许的，本方案完全兼容；
- 如需更多功能（进度条、音量、歌词同步），建议基于此结构扩展，优先使用原生 Audio API + 事件监听（timeupdate, volumechange, loadedmetadata）。
该方案以最小代码实现最大可用性，适合嵌入博客、作品集或教学项目——真正“写一次，随处播放”。
立即学习“Java免费学习笔记（深入）”；
