点击新专辑时自动暂停当前音频

本文介绍在音乐播放器中实现“点击新专辑自动暂停旧音频并播放新音频”的核心逻辑，通过维护一个全局音频引用变量来管理播放状态，避免多首歌曲同时播放的问题。

在音乐播放器的交互场景中，有一个常见需求值得详细说明：每次点击不同专辑时，应立刻停止当前音频，并无缝接续新专辑的播放。如果缺乏有效控制，很快就会出现问题——

用户多次点击专辑后，多首歌曲可能同时播放，声音相互叠加，不仅影响听觉体验，还会导致浏览器内存持续上升。这便是典型的多实例并发问题。

问题根源在于：每次点击都创建了一个新的 new Audio() 实例，但先前创建的音频实例既未被记录，也无人管理，自然无法调用 .pause() 将其停止。解决思路非常直接——使用一个外部变量，始终持有当前正在播放的音频对象；在每次播放新音频之前，先暂停之前的音频。

正确实现方式（推荐）

// 全局变量：始终指向当前正在播放（或最后播放过）的 Audio 实例let lastPlayedSong = null;// 为所有 .album 元素绑定点击事件（支持动态添加的元素可改用事件委托）document.querySelectorAll(".album").forEach(album => {  album.addEventListener("click", function () {    // 安全获取专辑标题（避免空节点报错）    const titleElement = this.querySelector("h4");    if (!titleElement) return;    const songName = titleElement.textContent.trim();    const audioPath = `assets/songs/${songName}.mp3`;    // 创建新 Audio 实例    const playSong = new Audio(audioPath);    // 【关键步骤】先暂停上一首（如果存在）    if (lastPlayedSong) {      lastPlayedSong.pause();      // 可选：重置播放位置，提升用户体验      lastPlayedSong.currentTime = 0;    }    // 播放新歌，并更新引用    playSong.play().catch(err => {      console.warn("音频播放失败:", err.message);    });    lastPlayedSong = playSong;  });});

这段代码的核心在于 if (lastPlayedSong) 判断——在新音频启动前，先找到上一次播放的音频对象并使其停止。这一思路看似简单，但在实际项目开发中，许多开发者容易忽略此步骤，导致页面同时运行十多个 Audio 实例，进而引发性能问题。

当然，仅有上述代码仍不够完善，以下细节也需一并考量。

注意事项与优化建议

• 错误处理：.play() 是异步操作，且浏览器可能因用户未触发手势（如页面刚加载）而拒绝播放。若未添加 .catch() 进行兜底，控制台会直接报错，影响用户体验。因此务必加入异常捕获。
• 内存管理：虽然 Audio 对象本身可被垃圾回收，但若维护一个数组或列表，不断添加新实例而不清理，内存占用将持续升高。本方案仅保留一个引用，安全且高效。
• 扩展性增强：若播放器还需要支持暂停、播放、进度条拖拽、音量调节等功能，仅靠一个 lastPlayedSong 变量可能不够。更优的做法是将逻辑封装为一个 AudioPlayer 类，将状态和操作集中管理。
• HTML 结构兼容性：代码中使用 this.querySelector("h4") 获取标题，与具体 DOM 层级解耦——无论 h4 位于 album 下的第几层，均可命中，比固定的 div.album > h4 选择器更为健壮。
• 动态内容支持：如果专辑列表是通过 JavaScript 动态生成的，上述 forEach 逐个绑定事件的方式可能失效（新元素未绑定事件）。此时推荐使用事件委托，监听父容器（如 .albums-container）的点击事件，通过 e.target.closest 判断点击目标是否为专辑区域。

document.querySelector(".albums-container").addEventListener("click", function(e) {  if (e.target.closest(".album")) {    // 处理点击逻辑（同上）  }});

按照这一套思路，不仅解决了多音频并发问题，还为播放器后续功能（如播放列表、循环模式、歌词同步）留出了清晰的扩展空间。请记住：状态管理是前端交互的核心，合理持有与释放引用，是编写可维护音频应用的第一步。