Change innerHTML when audio is playing or paused

Question

I'm trying to change text inside of several buttons when audio is paused. For now my function does pause and play the audio, but for a reason I don't quite understand, my function won't change the HTML inside buttons.

⚆ _ ⚆ What am I doing wrong?

  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>

UPDATE: here is an improved version based on Kevin Mpofu solution. It does change HTML inside all buttons when audio is paused or played.

      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>

score 0 · Accepted Answer · answered Oct 30 '21 at 10:16

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>

Change innerHTML when audio is playing or paused

1 Answers1