Custom Audio Player play and pause button

Question

I am creating an audio playlist. I have created the custom audio player using the code below. It works fine although the issue is that i have auto play on which means that when the first song is over it automatically goes into the next song. This causes the play pause button to be all messed up. It is kind of hard to explain though if you go to this link and go the very end of a song you will know what i mean. Please help me, this is really holding me back.

        <!--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

I'd recommend listening to the onplay event in your JavaScript. This event is raised when the audio starts playing. Here's an example:

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

This causes the button to be changed to a pause button whenever the audio plays, regardless of whether is was started by a user click. I hope this helps!

EDIT

I've looked at your code some more, and I've discovered that this works:

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