音乐App中Event Listener首次点击失效，点击效果交替异常求助

问题现象 #

开发的音乐App期望实现：点击任意歌曲条目时，播放该歌曲、更新「正在播放」区域的歌曲详情、启动均衡器动画。但当前存在异常：首次点击无响应，第二次点击功能正常，第三次点击再次失效，后续以此交替出现。

问题根源 #

核心问题在于全局isPlaying变量的状态干扰：

• 初始状态isPlaying = true，第一次点击歌曲时，执行播放逻辑并将isPlaying设为false；
• 若第二次点击另一首歌曲，此时isPlaying为false，代码会执行暂停逻辑（而非播放新歌曲），导致看起来无响应；
• 第三次点击时isPlaying被重置为true，又能正常播放，以此循环交替。

用户点击不同歌曲的核心意图是播放新歌曲，而非切换同一首歌的播放/暂停状态，全局变量的状态逻辑不符合这个交互预期。

修复代码 #

修改JavaScript逻辑，移除全局isPlaying的干扰，新增变量跟踪当前播放实例，匹配用户交互意图：

const playingNow = document.querySelector('.song-p-now');
const equalizer = document.querySelectorAll('.eq')
const btns = Array.from(document.querySelectorAll('.song-details'));
// 跟踪当前正在播放的音频实例
let currentAudio = null;

const btnsLoop = () => {
  for (let j = 0; j < btns.length; j++) {
    const musicObject = music[j];
    const { img, songName, audio, artist } = musicObject;
    
    btns[j].addEventListener('click', () => {
      // 更新正在播放区域的歌曲信息
      playingNow.innerHTML = `<div class="song-poster"><img src="${img}" alt=""></div>
            <div class="song-artist-name">
                <div class="song-name">${songName}</div>
                <div class="artist-name">${artist}</div>
            </div>`;
      
      // 暂停所有音频并重置进度
      music.forEach(element => {
        element.audio.pause();
        element.audio.currentTime = 0;
      });
      
      // 先停止所有均衡器动画
      equalizer.forEach((eq) => {
        eq.classList.remove('animation');
      });
      
      // 点击的是当前正在播放的歌曲，切换播放/暂停
      if (currentAudio === audio) {
        if (!audio.paused) {
          audio.pause();
          currentAudio = null;
        } else {
          audio.play();
          equalizer.forEach((eq) => {
            eq.classList.add('animation');
          });
        }
        return;
      }
      
      // 播放新选中的歌曲
      audio.play();
      equalizer.forEach((eq) => {
        eq.classList.add('animation');
      });
      currentAudio = audio;
    });
  }
}

btnsLoop();

修复说明 #

1. 新增currentAudio变量，精准跟踪当前播放的音频实例，区分点击同一首歌/新歌曲的场景；
2. 点击新歌曲时：先统一暂停所有音频、重置进度、停止动画，再播放目标歌曲并启动动画；
3. 点击当前播放的歌曲时：仅切换该歌曲的播放/暂停状态，同步更新均衡器动画；
4. 移除全局isPlaying变量，彻底避免跨歌曲的状态冲突。

内容的提问来源于stack exchange，提问作者Yasir Lasfar