播放和暫停按鈕可以正常工作……但是一旦音頻結束，如何重置按鈕以顯示播放符號？

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>