Estoy tratando de cambiar el texto dentro de varios botones cuando el audio está en pausa. Por ahora, mi función hace una pausa y reproduce el audio, pero por una razón que no entiendo muy bien, mi función no cambiará los botones HTML internos.
⚆ _ ⚆ ¿Qué estoy haciendo mal?
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>ACTUALIZACIÓN: aquí hay una versión mejorada basada en la solución de Kevin Mpofu . Cambia el HTML dentro de todos los botones cuando el audio está en pausa o se reproduce.
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> 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>