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

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