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

Question

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>

@JoelGarciaNuño, I added the code above. Thanks for looking! — jennykat, Apr 27 '18 at 17:50
check [how to detect end of audio file using jquery and html5](https://stackoverflow.com/questions/15586209/how-to-detect-end-of-audio-file-using-jquery-and-html5) instead of jQuery you can use addEventListener — jcubic, Apr 27 '18 at 17:54
Possible duplicate of [Is there an oncomplete event for HTML5 audio?](https://stackoverflow.com/questions/5092266/is-there-an-oncomplete-event-for-html5-audio) — M -, Apr 27 '18 at 17:58
[link](https://codepen.io/SirXplosiv/pen/ZoBRea?editors=1010) — Joel Garcia Nuño, Apr 27 '18 at 18:01
@JoelGarciaNuño, thanks for setting that up! I'm seeing the same problem in the CodePen — the audio is resetting properly, but the button is not. Maybe it's a browser issue... are you seeing it reset? — jennykat, Apr 27 '18 at 18:12
Thanks, @Marquizzo and jcubic, for your suggestion of addEventListener. I got it working with that. — jennykat, Apr 27 '18 at 18:24

jennykat · Answer 1 · 2018-04-27T18:46:05.127

2

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>

edited Apr 27 '18 at 18:46

answered Apr 27 '18 at 18:20

jennykat

125
7

Make sure you put the `addEventListener()` lines OUTSIDE the function `playAudioA()`. The way you have it now, you're adding new event listeners every time you click the button, which can lead to unwanted behavior. – M - Apr 27 '18 at 18:30

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

1 Answers1