自定义音频播放器播放和暂停按钮

Question

我正在创建一个音频播放列表。我使用下面的代码创建了自定义音频播放器。它工作正常，虽然问题是我有自动播放，这意味着当第一首歌曲结束时，它会自动进入下一首歌曲。这会导致播放暂停按钮完全混乱。这有点难以解释，但如果你去this link 并走到一首歌的最后，你就会明白我的意思。请帮帮我，这真的阻碍了我。

        <!--HTML5 audio-->
<audio id="audioPlayer" preload="true">
    <source src="oh-my.mp3">      
</audio>

<div id="wrapper">
    <!--Audio Player Interface-->
    <div id="audioplayer">
        <button id="pButton" class="play"></button>
        <div id="timeline">
            <div id="playhead"></div>
        </div>
    </div>
</div>

<script src="js/html5audio.js" type="text/javascript"></script>

Answer 1

我建议您在 JavaScript 中收听 onplay 事件。当音频开始播放时引发此事件。这是一个例子：

document.getElementById('audioPlayer').onplay = function(){
    document.getElementById('pButton').style.background = "url(pause.png)"
}

这会导致该按钮在音频播放时更改为暂停按钮，无论是否由用户单击启动。我希望这会有所帮助！

编辑

我又查看了您的代码，发现这行得通：

$("#audioPlayer").on("ended play", function(){
    $("#pButton").addClass("pause").removeClass("play")
})