Estoy enfrentando algunos problemas con mis botones de reproducción/pausa. En ym HTMl tengo varios botones con diferentes fuentes:
<div> <button class="button-53" id="button">Play</button> </div> <audio id="player"> <source src='audio/mixdown.mp3' type='audio/mpeg'/> </audio> <div> <button class="button-53" id="button">Play</button> </div> <audio id="player"> <source src='audio/mixdown2.mp3' type='audio/mpeg'/> </audio>Este es mi JavaScript:
var buttons = document.getElementById("button"); var music = document.getElementById("player"); for (const buttons of button) { buttons.addEventListener("click", function(){ if(music.paused){ music.play(); buttons.innerHTML = "Pause"; } else { music.pause(); buttons.innerHTML = "Play"; } }); }Pero cuando reproduzco música desde el primer botón y luego la detengo, paso al siguiente botón y alterno el botón, el sonido sigue reproduciéndose desde ese punto donde lo detuve en lugar de reproducir el sonido desde la fuente escrita.
¿Alguien aquí que pueda ayudarme?
Los atributos de identificación en HTML deben ser únicos. El document.getElementById devuelve un solo elemento (si se encuentra).
Una solución para solucionar su problema es dar a cada par de botones/elementos de audio diferentes identificadores, por ejemplo:
<div> <button class="button-53" id="button1">Play</button> </div> <audio id="player1"> <source src='audio/mixdown.mp3' type='audio/mpeg'/> </audio> <div> <button class="button-53" id="button2">Play</button> </div> <audio id="player2"> <source src='audio/mixdown2.mp3' type='audio/mpeg'/> </audio>y luego agregue detectores de eventos para cada par:
function addListeners(buttonElement, audioElement) { // ...add implementation } addListeners( document.getElementById("button1"), document.getElementById("player1") ); addListeners( document.getElementById("button2"), document.getElementById("player2") );