实现点击专辑时暂停当前音频并播放新音频

在音乐播放器开发中，一个常见但容易出错的场景是：用户点击新专辑时，旧专辑仍在播放，两首歌同时响起，造成体验混乱。实现“点击即切换、音频不打架”的核心逻辑其实非常清晰——用一个全局变量记录当前播放的音频实例，在新音频开始前先主动停止它。

下面这张图来自真实项目，展示的正是这种交互模式：

许多初学者在编写播放器时，习惯为每个专辑元素单独绑定点击事件，然后每次创建一个新的 Audio 对象直接调用 .play()。结果呢？前一刻点开 A 专辑，下一刻点开 B 专辑，两个音频同时播放，后端工程师看了都想报警。问题的根源在于没有管理“当前正在播放的实例”。

正确实现方式（推荐）

核心策略只有三步：定义外部变量 lastPlayedSong 持久保存最后一次播放的 Audio 对象；每次点击时检查它是否存在，如果存在就先暂停；再创建新实例，赋值给该变量，最后播放。代码实现如下：

let lastPlayedSong = null;

document.querySelectorAll(".album").forEach(album => {
  album.addEventListener("click", function () {
    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 在异步回调中变成意外值），而 forEach 自带作用域隔离，代码也更简洁。
• textContent.trim() 比 innerText 更可靠：innerText 在某些浏览器中会做额外排版处理，而 textContent 返回纯粹的文本内容，再配合 trim() 去掉前后空白，能有效避免路径拼接错误（比如歌名后有空格变成 “Dooriyan .mp3” 导致 404）。
• .play() 返回一个 Promise：现代浏览器对自动播放有严格限制（用户未交互时播放会被拒绝），用 .catch() 捕获异常，能让代码更健壮，而不是静默失败。
• 选择器无需过度优化：this.querySelector("h4") 已经足够高效，完全没必要写成冗长的 "div.album > h4"。

注意事项

• 音频文件名必须与
  文本完全一致（大小写、空格、标点符号都不能差），否则路径直接报 404。
• 如果想实现“再次点击同一专辑时暂停/继续播放”的 toggle 效果，可以在事件处理中增加状态判断，比如检查 lastPlayedSong === audio && !audio.paused，然后分别处理暂停或继续。
• 当项目规模变大时（比如需要音量控制、进度条、播放列表等），不要把所有逻辑堆在事件回调里。推荐将音频控制封装成一个类（比如 AudioPlayer），职责单一，扩展方便。

这个模式虽然简单，却是实现专业级单实例音频播放的基石——点击即切换，无重叠、无卡顿，用户感受自然流畅。