如何实现点击播放新音频时自动暂停当前正在播放的音频

本文介绍在音乐播放器中通过 javascript 管理单例音频实例的方法：点击任一专辑时，自动暂停此前正在播放的音频，并无缝切换至新音频，避免多音轨并发播放。核心在于维护一个全局引用的 audio 实例变量。

本文介绍在音乐播放器中通过 javascript 管理单例音频实例的方法：点击任一专辑时，自动暂停此前正在播放的音频，并无缝切换至新音频，避免多音轨并发播放。核心在于维护一个全局引用的 audio 实例变量。

在构建网页音乐播放器时，一个常见却关键的需求是“独占播放”——即同一时刻仅允许一首歌曲播放。你当前的代码每次点击专辑都会创建全新的 Audio 对象并调用 .play()，导致多个音频实例并行运行。解决该问题无需重构 DOM 结构或弃用循环绑定，而应聚焦于音频生命周期管理。

✅ 正确做法：全局维护唯一音频引用

只需在事件监听器外部声明一个变量（如 lastPlayedSong），用于保存最近创建并正在播放的 Audio 实例。每次点击触发时，先检查该变量是否存在且处于播放状态，若存在则调用 .pause()；随后创建新音频对象、播放，并将其赋值给该变量：

let lastPlayedSong = null;// 为所有 .album 元素绑定点击事件document.querySelectorAll(".album").forEach(album => {  album.addEventListener("click", function () {    // 获取专辑标题（推荐使用 textContent 更健壮）    const songName = this.querySelector("h4").textContent.trim();    const audioPath = `assets/songs/${songName}.mp3`;    // 创建新 Audio 实例    const currentSong = new Audio(audioPath);    // 暂停上一首（如果存在）    if (lastPlayedSong) {      lastPlayedSong.pause();      // 可选：重置播放位置，便于下次点击重新播放      lastPlayedSong.currentTime = 0;    }    // 播放当前歌曲，并更新引用    currentSong.play().catch(e => {      console.warn("音频播放被阻止（例如用户未交互）:", e);    });    lastPlayedSong = currentSong;  });});

? 优化说明：

• 使用 forEach 替代 for 循环 + querySelectorAll()[i]，语义更清晰、不易越界；
• textContent 比 innerText 更标准，兼容性更好，且避免因 CSS 隐藏文本引发意外空值；
• 添加 .catch() 处理自动播放策略限制（现代浏览器要求用户手势触发播放）；
• 显式设置 currentTime = 0 可确保重复点击同一专辑时从头播放。

⚠️ 注意事项与进阶建议

• 内存与资源管理：Audio 对象本身轻量，但频繁创建/销毁无明显开销；若需长期支持暂停/恢复/进度控制，建议将 currentSong 封装为模块级状态对象（如含 play(), pause(), seek() 方法）。
• UI 同步：可扩展逻辑，在播放新歌时移除旧专辑的“正在播放”样式（如添加 .playing 类），并在新专辑上添加对应样式，提升用户体验。
• 错误防护：实际项目中应校验 audioPath 是否有效（如预加载或捕获 onerror 事件），避免静音或报错却不提示。

通过这一简洁而稳健的设计，你就能以最小改动实现专业级的单音频流控制逻辑——既满足功能需求，又为后续功能（如播放列表、进度条、音量控制）打下良好基础。