音乐播放器开发问题：点击新专辑时暂停旧音频播放新音频

问题背景 #

当前音乐播放器实现了点击专辑播放对应音频的功能，但每次点击都会创建新的Audio实例，导致多首歌同时播放。需要实现点击新专辑时自动暂停正在播放的旧音频，再播放新音频。

解决方案 #

核心思路是维护一个全局变量追踪当前播放的音频实例，每次点击时先暂停旧音频，再创建并播放新音频。同时优化事件绑定方式，提升性能。

修改后的代码 #

JavaScript 代码

// 全局变量：追踪当前正在播放的音频实例
let currentAudio = null;

// 使用事件委托给父容器绑定点击事件，更高效且支持动态添加专辑
document.querySelector('.albums-container').addEventListener('click', function(e) {
  // 定位到被点击的专辑元素
  const targetAlbum = e.target.closest('.album');
  if (!targetAlbum) return; // 点击的不是专辑区域，直接返回

  // 获取歌曲名称
  const songName = targetAlbum.querySelector('h4').innerText;
  const audioPath = `assets/songs/${songName}.mp3`;

  // 暂停当前正在播放的音频（如果存在）
  if (currentAudio) {
    currentAudio.pause();
    // 可选：如果需要点击同一专辑时切换播放/暂停，可添加以下判断
    // if (currentAudio.src.includes(songName)) {
    //   currentAudio = null;
    //   return;
    // }
  }

  // 创建新音频实例并播放
  currentAudio = new Audio(audioPath);
  currentAudio.play();
});

HTML 代码（无需修改）

<div class="albums-container">
  <div class="album">
    <img src="./assets/images/Dooriyan.jpg" alt="dooriyan-logo">
    <h4>Dooriyan</h4>
    <img class="play-btn" src="./assets/images/play-btn.png" alt="playBtn">
  </div>
  <div class="album">
    <img src="./assets/images/Zara Zara.jpg" alt="dooriyan-logo">
    <h4>Zara Zara</h4>
    <img class="play-btn" src="./assets/images/play-btn.png" alt="playBtn">
  </div>
  <div class="album">
    <img src="./assets/images/Tu Aake Dekhle.jpg" alt="dooriyan-logo">
    <h4>Tu Aake Dekhle</h4>
    <img class="play-btn" src="./assets/images/play-btn.png" alt="playBtn">
  </div>
</div>

关键优化点 #

1. 全局音频实例追踪：通过currentAudio变量保存当前播放的音频对象，确保能随时暂停旧音频。
2. 事件委托：仅给父容器albums-container绑定一次事件，替代原循环绑定27次的方式，性能更优，且支持后续动态添加的专辑元素。
3. 精准事件触发：使用closest('.album')确保点击专辑内任意元素都能触发播放逻辑，同时过滤非专辑区域的无效点击。

内容的提问来源于stack exchange，提问作者Md Faiz