单图音乐播放/暂停按钮功能异常，求排查JS/CSS代码问题

你的代码核心问题在于重复定义函数、选择器匹配错误、DOM API拼写错误，导致播放暂停逻辑混乱，以下是修正后的完整实现：

问题点分析 #

• 重复声明musicPlay函数：多次定义同名函数会覆盖之前的逻辑，导致最初带样式切换的函数失效
• 选择器错误：document.querySelector(".play-pause")使用类选择器，但目标元素的ID是play-pause，类名是play/pause，匹配不到元素
• API拼写错误：document.getElementsById是错误写法，正确应为document.getElementById（无复数s）

修正后的完整代码 #

HTML（无需修改） #

<ul>
  <li class="nav-item nohover">
    <audio id="music-button">
      <source src="Zara%20Larsson%20Lush%20Life%20Lyrics.mp3" preload="auto" type="audio/mpeg" />
    </audio>
    <div id="music-button-container">
      <div id="play-pause" class="play"></div>
    </div>
    <!--<a onclick="musicPlay()"><img src="music2.png" width="65px"></a>-->
  </li>
</ul>

CSS（无需修改） #

#music-button-container,
#play-pause {
  cursor: pointer;
  height: 50px;
  width: 70px;
  padding: 12px 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px;
}

.play {
  background-image: url(./music2.png);
}

.pause {
  background-image: url(./equalizer.png) !important;
}

JavaScript（精简修正版） #

// 获取音频元素和控制按钮
const music = document.getElementById('music-button');
const controlButton = document.getElementById('play-pause');

// 统一播放/暂停逻辑
function musicPlay() {
  if (music.paused) {
    music.play();
    controlButton.className = "pause";
  } else {
    music.pause();
    controlButton.className = "play";
  }
}

// 绑定点击事件
controlButton.addEventListener("click", musicPlay);

// 歌曲结束后恢复播放按钮样式
music.addEventListener("ended", function () {
  controlButton.className = "play";
});

逻辑说明 #

1. 仅保留一次musicPlay函数定义，确保播放/暂停的状态切换和样式更新逻辑统一
2. 移除所有冗余的重复函数和无效事件监听，避免逻辑冲突
3. 歌曲播放结束后自动将按钮样式切回播放状态，保持UI一致性

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