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

Posted 2023-02-25

【中文标题】播放和暂停按钮正在工作...但是如何重置按钮以在音频结束后显示播放符号？

【英文标题】：Play and pause buttons are working... but how do I reset button to show the play symbol once audio is over?

【发布时间】：2018-04-27 17:42:14

【问题描述】：

我编写了一个按钮来显示“播放”符号（三角形）。当您单击该按钮时，将播放选定的音频，并且该按钮显示一个“暂停”符号。如果单击暂停，音频会暂停，并且按钮会切换回播放符号。到现在为止还挺好。但是，当音频结束时，按钮会继续显示“暂停”符号。音频重置，但图像没有；您可以再次按下按钮，音频将根据需要播放多次，但图像不会重置为播放三角形。对新手有什么建议吗？

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

【问题讨论】：

显示元素#playA

@JoelGarciaNuño，我添加了上面的代码。感谢收看！

检查how to detect end of audio file using jquery and html5而不是jQuery，你可以使用addEventListener

Is there an oncomplete event for HTML5 audio?的可能重复

link

【参考方案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> 

【讨论】：

确保将addEventListener() 行放在函数playAudioA() 之外。按照现在的方式，每次单击按钮时都会添加新的事件侦听器，这可能会导致不必要的行为。