播放或暂停音频时更改 innerHTML答案

【问题标题】：Change innerHTML when audio is playing or paused播放或暂停音频时更改 innerHTML
【发布时间】：2021-12-15 02:25:15
【问题描述】：

我正在尝试在音频暂停时更改几个按钮内的文本。现在我的函数确实暂停并播放音频，但由于我不太明白的原因，我的函数不会更改按钮内部的 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>

更新： 这是基于Kevin Mpofu 解决方案的改进版本。当音频暂停或播放时，它确实会更改所有按钮内的 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>

【问题讨论】：

标签： javascript audio addeventlistener innerhtml

【解决方案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>

【讨论】：