点击播放新音频自动暂停旧音频

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

构建网页音乐播放器时，一个折磨人的需求就是“独占播放”——同一时刻只能响起一首歌。你现在的代码每次点击专辑都新建一个 Audio 对象，结果多首并行播放，乱成一团。解决这个痛点不需要重构 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 事件），避免无声播放或报错但用户看不到。

通过这个简洁又稳健的设计，你就能用最小的改动实现专业级别的单音频流控制逻辑——既满足核心功能，又为后续扩展（播放列表、进度条、音量控制）打下了基础。