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

本文介绍在音乐播放器中实现“点击新专辑自动暂停旧音频并播放新音频”的核心逻辑，通过全局变量追踪上一个 audio 实例，确保同一时间仅有一个音频播放。

本文介绍在音乐播放器中实现“点击新专辑自动暂停旧音频并播放新音频”的核心逻辑，通过全局变量追踪上一个 audio 实例，确保同一时间仅有一个音频播放。

在构建前端音乐播放器时，一个常见但关键的需求是：避免多首歌曲同时播放。你当前的代码为每个 .album 元素绑定独立的 click 事件监听器，并每次创建新的 Audio 实例调用 .play() —— 这会导致多个音频并行播放，用户体验混乱。

解决的核心思路是：维护一个对“当前正在播放的音频实例”的引用，并在播放新音频前主动暂停它。

✅ 正确实现方式（推荐）

使用一个外部作用域变量 lastPlayedSong 持久化保存最近创建并播放的 Audio 对象。每次点击时：

1. 先检查 lastPlayedSong 是否存在且处于播放状态（可选增强判断）；
2. 若存在，调用其 .pause() 方法；
3. 创建新 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），便于扩展音量控制、进度条、播放列表等。

通过这一简洁而有效的模式，你就能轻松实现专业级的单实例音频播放体验——点击即切换，无重叠、无卡顿。