在播放或暂停音频时更改 innerHTML

Question

我正在尝试在音频暂停时更改几个按钮内的文本。现在我的功能确实暂停并播放音频，但由于我不太明白的原因，我的功能不会改变按钮内的 HTML。

⚆ _ ⚆ 我哪里做错了？

  var Audio = document.getElementById('Audio');
  var buttonPlay = document.querySelectorAll('.music-play-button');
  for (var i = 0; i < buttonPlay.length; i++) {
    buttonPlay[i].addEventListener("click", function () {
      if (Audio.paused) {
        Audio.play();
        buttonPlay[i].innerHTML = "Pause Music";
      } else {
        Audio.pause();
        buttonPlay[i].innerHTML = "Play Music";
      }
    });
  }

<button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<audio id="Audio" src='https://dl.dropboxusercontent.com/s/0xu2nln4mpathtw/The%20Wraith.mp3'></audio>

更新： 这是基于解决方案的改进版本。当音频暂停或播放时，它会在所有按钮内发生变化 HTML。

      var Audio = document.getElementById("Audio");
      var buttonPlay = document.querySelectorAll(".music-play-button");

        
      buttonPlay.forEach((prm) => {
        Audio.addEventListener('playing', (event) => {prm.innerHTML = "Pause Music";})});

      buttonPlay.forEach((prm) => {
        Audio.addEventListener('pause', (event) => {prm.innerHTML = "Play Music";})});

      buttonPlay.forEach((prm) => {
        prm.addEventListener("click", function () {
          if (Audio.paused) {
            Audio.play();
            prm.innerHTML = "Pause Music";
          } else {
            Audio.pause();
            prm.innerHTML = "Play Music";
          }
        });
      });

    <button class="music-play-button">Play Music</button>
    <button class="music-play-button">Play Music</button>
    <button class="music-play-button">Play Music</button>
    <audio id="Audio" src="https://dl.dropboxusercontent.com/s/0xu2nln4mpathtw/The%20Wraith.mp3"></audio>

Answer 1

var Audio = document.getElementById('Audio');
var buttonPlay = document.querySelectorAll('.music-play-button');


buttonPlay.forEach(btn => {
    btn.addEventListener("click", function () {
        if (Audio.paused) {
          Audio.play();
          btn.innerHTML = "Pause Music";
        } else {
          Audio.pause();
          btn.innerHTML = "Play Music";
        }
      }); 
});

<button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<audio id="Audio" src='https://dl.dropboxusercontent.com/s/0xu2nln4mpathtw/The%20Wraith.mp3'></audio>

在播放或暂停音频时更改 innerHTML

Change innerHTML when audio is playing or paused

javascript

audio

innerhtml

addeventlistener