我想在HTML和JAVASCRIPT中完成播放声音时调用一个函数

Question

我想通过点击播放按钮来播放声音-它变成了一个暂停按钮，当我点击暂停按钮时，它暂停了声音并变成了播放按钮，当声音结束时，我想把它从暂停按钮改为播放按钮再次播放。以下是守则:CSS:

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

Answer 1

在HTML Code audio标签中，添加这个属性和它的值:

<audio id="audio" src="name.mp3" onended="PlayButtonShow()">
Your browser does not support the audio element.
</audio>