I want to play a sound by click the play button - it changed to a pause button and when I click the pause button it paused the sound and changed to play button, button when the sound finishes, I want to change it from the Pause button to the Play Button to play Again. Here is the Code: CSS:

.play-button {
    display: none
}

.play-button.show {
    display: block;
}
.pause-button {
    display: none;
}

.pause-button.show {
    display: block
}

for 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>

for 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')
}