音乐播放器播放功能开发遇Uncaught TypeError错误求助

错误分析 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'contains')是两个核心问题导致的：

• document.querySelectorAll('.player')返回的是NodeList集合，不是单个DOM元素，集合本身没有classList属性，调用musicPlayer.classList会直接报错。
• classList.contains('.play')里多了前缀.，contains方法只需要传入类名文本，不需要加.前缀。

另外你的代码缺少playSong和pauseSong的具体实现，且未正确关联播放按钮对应的音频元素，以下是完整修复方案：

修正后的变量声明 #

const pauseIconClassName = 'fa-pause'
const playIconClassName = 'fa-play'
const equalizerIconClassName = 'material-icons'
// 单个播放器用querySelector返回单个元素，而非集合
const musicPlayer = document.querySelector('.player');
// 获取所有播放按钮（命名改为playBtns避免变量冲突）
const playBtns = document.querySelectorAll('.play');
// 获取对应的音频元素
const audio = document.querySelector('.audio');

完整播放控制逻辑 #

// 播放歌曲函数
function playSong(playBtn) {
  audio.play();
  // 切换播放按钮图标
  playBtn.classList.remove(playIconClassName);
  playBtn.classList.add(pauseIconClassName);
  // 给播放器添加状态类用于标识播放状态
  musicPlayer.classList.add('playing');
}

// 暂停歌曲函数
function pauseSong(playBtn) {
  audio.pause();
  // 恢复播放按钮图标
  playBtn.classList.remove(pauseIconClassName);
  playBtn.classList.add(playIconClassName);
  // 移除播放器的播放状态类
  musicPlayer.classList.remove('playing');
}

// 给每个播放按钮绑定点击事件
playBtns.forEach((playBtn) => {
  playBtn.addEventListener('click', () => {
    // 检查播放器是否处于播放状态
    const isPlaying = musicPlayer.classList.contains('playing');
    if (isPlaying) {
      pauseSong(playBtn);
    } else {
      playSong(playBtn);
    }
  });
});

多播放器场景适配（可选） #

如果页面存在多个播放器，需要让每个按钮对应自身所属的播放器和音频，可调整为以下逻辑：

playBtns.forEach((playBtn) => {
  playBtn.addEventListener('click', () => {
    // 通过closest找到当前按钮所属的播放器容器
    const currentPlayer = playBtn.closest('.player');
    // 获取当前播放器内的音频元素
    const currentAudio = currentPlayer.querySelector('.audio');
    // 检查当前播放器的播放状态
    const isPlaying = currentPlayer.classList.contains('playing');
    
    if (isPlaying) {
      currentAudio.pause();
      playBtn.classList.remove(pauseIconClassName);
      playBtn.classList.add(playIconClassName);
      currentPlayer.classList.remove('playing');
    } else {
      currentAudio.play();
      playBtn.classList.remove(playIconClassName);
      playBtn.classList.add(pauseIconClassName);
      currentPlayer.classList.add('playing');
    }
  });
});

修改后即可正常触发播放/暂停功能，解决之前的TypeError错误。

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