Reputation: 125
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
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