如何在HTML与JavaScript中实现音频播放结束时自动切回播放按钮

原有代码存在的问题 #

• 变量命名非法：JavaScript 变量名不能包含-字符，play-button、pause-button这类命名会直接报错
• 存在大量未定义变量：play、pause、x、myAudio均没有声明定义，运行时会触发异常
• 功能逻辑重复：多个按钮切换函数功能冗余，没有可复用性
• 缺少音频播放结束的事件监听逻辑

完整修改后代码 #

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">Play</button>
<button class="pause-button" id="pause-button">Pause</button>

这里去掉了冗余的行内onclick事件，统一在JS中绑定事件，后续维护更方便

JavaScript 代码 #

// 修正变量命名，使用合法的驼峰命名规则
const playBtn = document.getElementById('play-button')
const pauseBtn = document.getElementById('pause-button')
const audio = document.getElementById("audio");

// 封装播放逻辑
function playAudio() {
    audio.play()
    playBtn.classList.remove('show')
    pauseBtn.classList.add('show')
}

// 封装暂停/重置逻辑
function pauseAudio() {
    audio.pause()
    pauseBtn.classList.remove('show')
    playBtn.classList.add('show')
}

// 绑定按钮点击事件
playBtn.addEventListener('click', playAudio)
pauseBtn.addEventListener('click', pauseAudio)

// 新增音频播放结束事件监听，播放完成自动切回播放按钮
audio.addEventListener('ended', pauseAudio)

功能验证 #

• 点击播放按钮会自动切换为暂停按钮，同时播放音频
• 点击暂停按钮会自动切换为播放按钮，同时暂停音频
• 音频播放完成后会自动触发ended事件，执行暂停逻辑，按钮自动切回播放状态，用户可直接再次点击播放

内容的提问来源于stack exchange，提问作者Test