How can I implement a sound player that toggles between play and pause buttons, and changes back to play button after the sound finishes playing? Here is the code snippet:
.play-button {
display: none
}
.play-button.show {
display: block;
}
.pause-button {
display: none;
}
.pause-button.show {
display: block
}
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>
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')
}