本文介绍在音乐播放器中通过 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 事件），避免静音或报错却不提示。
通过这一简洁而稳健的设计，你就能以最小改动实现专业级的单音频流控制逻辑——既满足功能需求，又为后续功能（如播放列表、进度条、音量控制）打下良好基础。
