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

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)"
}

这会在播放音频时将按钮更改为暂停按钮，而不管是否由用户单击启动。希望对您有所帮助！

EDIT

我已经看了一些您的代码，发现它可以工作：

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