求助：为自制HTML音频播放器实现点击暂停/停止音频功能

嗨！作为HTML/CSS新手遇到这种功能实现问题完全不用不好意思～我来帮你把播放、暂停、停止的图标功能都加上，还会把逻辑讲得明明白白。

第一步：把你的PNG图标整合到页面里 #

首先，我们把你做好的Play、Pause、Stop图标用<img>标签加到HTML里，给每个图标绑定对应的点击事件，替换掉原来的“Play”文字：

<audio id="audio" src="sons/son.mp3" autoplay="false"></audio>

<!-- 播放图标 -->
<img src="你的播放图标路径.png" alt="播放" onclick="PlaySound()" style="cursor: pointer; width: 40px; height: 40px;">
<!-- 暂停图标 -->
<img src="你的暂停图标路径.png" alt="暂停" onclick="PauseSound()" style="cursor: pointer; width: 40px; height: 40px;">
<!-- 停止图标 -->
<img src="你的停止图标路径.png" alt="停止" onclick="StopSound()" style="cursor: pointer; width: 40px; height: 40px;">

<script>
// 先缓存音频元素，不用每次都重新获取
const audio = document.getElementById("audio");

function PlaySound() {
    // 如果音频处于暂停或结束状态，就开始播放
    if (audio.paused || audio.ended) {
        audio.play();
    }
}

function PauseSound() {
    // 直接调用暂停方法
    audio.pause();
}

function StopSound() {
    // 停止需要先暂停，再把播放进度重置到开头
    audio.pause();
    audio.currentTime = 0;
}
</script>

第二步：代码逻辑解释 #

• 缓存音频元素：我把document.getElementById("audio")放在脚本最外层，这样三个函数都能复用同一个元素，比每次函数里重新获取更高效。
• 播放功能：加了audio.paused || audio.ended的判断，这样就算音频播放完了，点击播放也能重新开始，而且播放过程中点击播放不会重复触发（避免不必要的错误）。
• 暂停功能：直接调用音频元素的pause()方法，就能让音频停在当前进度。
• 停止功能：因为原生音频没有专门的stop()方法，所以我们先暂停，再把currentTime设为0，这样音频就回到开头的停止状态了。

小提示：优化图标样式 #

你可以把内联的style换成CSS类，这样更规范，比如：

.player-icon {
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin: 0 5px; /* 给图标之间加一点间距 */
}

然后给每个img标签加上class="player-icon"就可以啦！

这样你点击对应的PNG图标，就能触发播放、暂停、停止的功能了，试试吧😉

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