点击播放按钮报'Cannot read property 'play' of null'及图标切换问题求助

这个报错的核心原因很明确：你通过document.querySelector获取的元素是null——也就是DOM里找不到对应的元素，当你尝试调用null.play()时自然会抛出这个错误。咱们一步步来把问题解决：

1. 先修复元素选择器的问题 #

• 首先看你的视频选择器：

  const video = document.querySelector("vid-container video");
  

  这里的vid-container应该是类选择器（假设你的HTML结构是<div class="vid-container"><video>...</video></div>），所以必须加上.，改成：

  const video = document.querySelector(".vid-container video");
  

• 然后检查.song选择器：确保你的HTML里确实存在一个带有song类的音频元素，比如<audio class="song" src="你的音频路径"></audio>。如果类名拼写错误、元素还没加载完成，或者根本不存在，song变量就会是null。

2. 修复播放/暂停图标切换逻辑 #

你现在的代码里，不管是播放还是暂停状态，都把play.src设成了play.svg，这完全不符合"点击切换图标"的需求。应该根据当前状态切换图标：

const checkPlaying = (song) => {
  if (song.paused) {
    song.play();
    video.play();
    play.src = "./meditation-app-master/svg/pause.svg"; // 播放状态显示暂停图标
  } else {
    song.pause();
    video.pause();
    play.src = "./meditation-app-master/svg/play.svg"; // 暂停状态显示播放图标
  }
};

3. 额外的安全防护（可选但推荐） #

为了避免类似的null报错，你可以在执行播放逻辑前先检查元素是否存在：

play.addEventListener("click", () => {
  if (song && video) { // 确保音频和视频元素都成功获取
    checkPlaying(song);
  } else {
    console.warn("无法找到音频或视频元素，请检查DOM结构和选择器");
  }
});

最后再确认两个细节 #

• 确保图标文件的路径是正确的：./meditation-app-master/svg/这个路径是相对于当前HTML文件的位置，别搞混了相对路径的层级。
• 确认你的.song元素是合法的HTML5 <audio>标签，只有这类元素才有paused、play()、pause()这些属性和方法。

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