Кнопки воспроизведения и паузы работают ... но как мне сбросить кнопку, чтобы отобразить символ воспроизведения после завершения звука?

Question

Я кодировал кнопку для отображения символа «игра» (треугольник). Когда вы нажимаете кнопку, воспроизводится выбранный звук, и вместо этого на кнопке отображается символ «паузы». Если вы нажмете на паузу, звук остановится, и кнопка вернется к символу воспроизведения. Все идет нормально. Однако, когда звук «OVER», кнопка продолжает отображать символ «паузы». Звук сбрасывается, а изображение - нет; Вы можете нажать кнопку еще раз, и звук будет воспроизводиться столько раз, сколько хотите, но изображение не сбрасывается в треугольник воспроизведения. Любой совет для новичка?

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

Answer 1

Я нашел ответ, благодаря предложенным выше предложениям ...

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