本文介绍在音乐播放器中实现“点击新专辑自动暂停旧音频并播放新音频”的核心逻辑，通过维护一个全局音频引用变量来管理播放状态，避免多首歌曲同时播放的问题。
本文介绍在音乐播放器中实现“点击新专辑自动暂停旧音频并播放新音频”的核心逻辑，通过维护一个全局音频引用变量来管理播放状态，避免多首歌曲同时播放的问题。
在构建网页端音乐播放器时，一个常见且关键的交互需求是：每次点击不同专辑时，应立即停止正在播放的音频，并无缝切换至新选中的歌曲。若不加控制，多次点击会创建多个 Audio 实例并同时播放，导致声音混杂、资源浪费，甚至引发浏览器性能问题。
上述问题的根本原因在于：每次点击都新建了一个 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;
});
});
⚠️ 注意事项与优化建议
- 错误处理：.play() 是异步操作且可能被浏览器策略拒绝（如无用户手势触发），务必用 .catch() 捕获异常；
- 内存管理：虽然 Audio 对象会被垃圾回收，但长期持有大量未释放的音频引用可能影响性能，本方案仅保留一个引用，安全高效；
- 扩展性增强：若需支持播放/暂停按钮、进度条或音量控制，建议将 lastPlayedSong 封装为播放器类（如 class AudioPlayer），统一管理状态；
- HTML 结构兼容性：代码使用 this.querySelector("h4") 替代原文中冗余的 "div.album > h4"，更健壮，适配任意层级结构；
- 动态内容支持：若专辑列表由 JS 动态生成，推荐改用事件委托（监听 .albums-container），避免重复绑定：
document.querySelector(".albums-container").addEventListener("click", function(e) {
if (e.target.closest(".album")) {
// 处理点击逻辑（同上）
}
});
通过这一简洁而可靠的模式，你不仅能解决多音频并发播放问题，还为后续功能（如播放列表、循环模式、歌词同步）打下坚实基础。记住：状态管理是前端交互的灵魂，合理持有和释放引用，是写出可维护音频应用的第一步。
