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

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

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

Custom Audio Player play and pause button

html

javascript

css

jquery

audio-streaming