Quiero reproducir un sonido haciendo clic en el botón de reproducción: cambió a un botón de pausa y cuando hago clic en el botón de pausa, detuvo el sonido y cambió al botón de reproducción, botón cuando el sonido termina, quiero cambiarlo desde el botón de Pausa al botón Reproducir para volver a jugar. Aquí está el código: CSS:
.play-button { display: none } .play-button.show { display: block; } .pause-button { display: none; } .pause-button.show { display: block }para HTML:
<audio id="audio" src="name.mp3"> Your browser does not support the audio element. </audio> <button class="play-button show" id="play-button" onclick="PlayButtonHide()">Play</button> <button class="pause-button" id="pause-button" onclick="PauseButtonShow()">Pause</button>para JavaScript:
var play-button = document.getElementById('play-button') var pause-button = document.getElementById('pause-button') var audio = document.getElementById("audio"); var duration = document.getElementById("myAudio").duration; function PlayButtonHide() { pause-button.classList.add('show') pause-button.setAttribute('onclick', 'PlayButtonShow()'); play-button.classList.remove('show') audio.play() } function PlayButtonShow() { play.classList.add('show') pause.classList.remove('show') x.pause() play.setAttribute('onclick', 'PlayButtonHide()'); } function PauseButtonShow() { pause-button.classList.add('show') pause-button.setAttribute('onclick', 'PauseButtonHide()'); play-button.classList.remove('show') } function PauseButtonHide() { pause-button.classList.remove('show') pause-button.setAttribute('onclick', 'PauseButtonShow()'); play-button.classList.add('show') }En la etiqueta de audio del código HTML, agregue este atributo con su valor:
<audio id="audio" src="name.mp3" onended="PlayButtonShow()"> Your browser does not support the audio element. </audio>