本文介绍在音乐播放器中实现“点击新专辑自动暂停旧音频并播放新音频”的核心逻辑，通过全局变量追踪上一个 audio 实例，确保同一时间仅有一个音频播放。
本文介绍在音乐播放器中实现“点击新专辑自动暂停旧音频并播放新音频”的核心逻辑，通过全局变量追踪上一个 audio 实例，确保同一时间仅有一个音频播放。
在构建前端音乐播放器时，一个常见但关键的需求是：避免多首歌曲同时播放。你当前的代码为每个 .album 元素绑定独立的 click 事件监听器，并每次创建新的 Audio 实例调用 .play() —— 这会导致多个音频并行播放，用户体验混乱。
解决的核心思路是：维护一个对“当前正在播放的音频实例”的引用，并在播放新音频前主动暂停它。
✅ 正确实现方式（推荐）
使用一个外部作用域变量 lastPlayedSong 持久化保存最近创建并播放的 Audio 对象。每次点击时：
- 先检查 lastPlayedSong 是否存在且处于播放状态（可选增强判断）；
- 若存在，调用其 .pause() 方法；
- 创建新 Audio 实例，赋值给 lastPlayedSong，再调用 .play()。
以下是优化后的完整 JavaScript 代码：
let lastPlayedSong = null;
// 为所有专辑元素批量绑定点击事件
document.querySelectorAll(".album").forEach(album => {
album.addEventListener("click", function () {
// 获取专辑标题（更健壮：使用 textContent 替代 innerText，避免换行/空格干扰）
const songName = this.querySelector("h4").textContent.trim();
// 构建音频路径
const audioPath = `assets/songs/${songName}.mp3`;
const audio = new Audio(audioPath);
// 暂停上一首（若存在）
if (lastPlayedSong) {
lastPlayedSong.pause();
}
// 播放新音频，并更新引用
audio.play().catch(err => {
console.warn(`音频播放失败：${audioPath}`, err);
});
lastPlayedSong = audio;
});
});? 关键优化说明
- 使用 forEach 替代 for 循环 + querySelectorAll[i]：语义更清晰、避免闭包陷阱（原代码中 i 在异步回调中可能产生意外值）；
- textContent.trim() 更可靠：比 innerText 更标准，且去除前后空白，防止路径拼接错误（如 "Dooriyan " → "Dooriyan .mp3"）；
- .play() 返回 Promise：现代浏览器中需处理可能的拒绝（如用户未交互即自动播放被阻止），添加 .catch() 提升健壮性；
- 无需 DOM 查询优化：this.querySelector("h4") 已足够高效，无需写冗余的 "div.album > h4"。
⚠️ 注意事项
- 确保所有音频文件命名与 <h4> 文本完全一致（包括大小写、空格、标点），否则路径会 404；
- 若需支持“再次点击同一专辑暂停/继续”，可在事件中增加状态判断（例如检查 lastPlayedSong === audio && !audio.paused）；
- 如项目规模扩大，建议将音频控制逻辑封装为类（如 AudioPlayer），便于扩展音量控制、进度条、播放列表等。
通过这一简洁而有效的模式，你就能轻松实现专业级的单实例音频播放体验——点击即切换，无重叠、无卡顿。
