Question

我已经编码了一个按钮来显示＆＃34; play＆＃34;符号（三角形）。单击按钮时，将播放所选音频，按钮将显示＆＃34;暂停＆＃34;符号而不是。如果单击暂停，音频将暂停，按钮将切换回播放符号。到现在为止还挺好。但是，当音频超过时，按钮会一直显示＆＃34;暂停＆＃34;符号。音频重置，但图像没有;您可以再次按此按钮，音频将播放多次，但图像不会重置为播放三角形。对新手有什么建议吗？

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

播放和暂停按钮正在工作......但是一旦音频结束，如何重置按钮以显示播放符号？

1 个答案: