jennykat
jennykat

Reputation: 125

Play and pause buttons are working... but how do I reset button to show the play symbol once audio is over?

I've coded a button to display the "play" symbol (triangle). When you click the button, the selected audio plays and the button displays a "pause" symbol instead. If you click pause, the audio pauses and the button switches back to the play symbol. So far, so good. When the audio is OVER, however, the button keeps displaying the "pause" symbol. The audio resets, but the image does not; you can press the button again and the audio will play as many times as you like, but the image does not reset to the play triangle. Any advice for a newbie?

<div class="playFeatured">
<audio id="playA" preload='none'></audio>
<i><button id="pButtonA" class="featuredAudio fa fa-play" onclick="playAudioA()"></button></i>
</div>


<script>
var loopA = document.getElementById('playA');

function playAudioA() {
    if (loopA.paused) {
        loopA.play();
        pButtonA.className = "";
        pButtonA.className = "fa fa-pause";
    } else { 
        loopA.pause();
        pButtonA.className = "";
        pButtonA.className = "fa fa-play";
        loopA.currentTime = 0
    }
} 
</script>

Upvotes: 1

Views: 261

Answers (1)

jennykat
jennykat

Reputation: 125

I found an answer, thanks to the suggestions offered above...

<script>
var loopA = document.getElementById('playA');

function playAudioA() {
    if (loopA.paused) {
        loopA.play();
        pButtonA.className = "";
        pButtonA.className = "fa fa-pause";
    } else { 
        loopA.pause();
        pButtonA.className = "";
        pButtonA.className = "fa fa-play";
        loopA.currentTime = 0
    } 
}
loopA.addEventListener('ended', function() {
    // Audio has ended when this function is executed.
        pButtonA.className = "";
        pButtonA.className = "fa fa-play";
},false);
</script> 

Upvotes: 2

Related Questions