Javascript 播放和暂停按钮正在工作。。。但音频结束后,如何重置按钮以显示播放符号?

Javascript 播放和暂停按钮正在工作。。。但音频结束后,如何重置按钮以显示播放符号?,javascript,if-statement,audio,Javascript,If Statement,Audio,我已经编码了一个按钮来显示“播放”符号(三角形)。单击该按钮时,将播放选定的音频,而该按钮将显示“暂停”符号。如果单击“暂停”,音频将暂停,按钮将切换回播放符号。到目前为止,一切顺利。但是,当音频结束时,按钮会继续显示“暂停”符号。音频复位,但图像不复位;您可以再次按下按钮,音频将播放任意次数,但图像不会重置为播放三角形。对新手有什么建议吗 <div class="playFeatured"> <audio id="playA" preload='none'></a

我已经编码了一个按钮来显示“播放”符号(三角形)。单击该按钮时,将播放选定的音频,而该按钮将显示“暂停”符号。如果单击“暂停”,音频将暂停,按钮将切换回播放符号。到目前为止,一切顺利。但是,当音频结束时,按钮会继续显示“暂停”符号。音频复位,但图像不复位;您可以再次按下按钮,音频将播放任意次数,但图像不会重置为播放三角形。对新手有什么建议吗

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

var loopA=document.getElementById('playA');
函数playAudioA(){
if(loopA.暂停){
loopA.play();
pButtonA.className=“”;
pButtonA.className=“暂停”;
}否则{
loopA.pause();
pButtonA.className=“”;
pButtonA.className=“fa-fa-play”;
loopA.currentTime=0
}
} 

多亏了上面的建议,我找到了答案

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

var loopA=document.getElementById('playA');
函数playAudioA(){
if(loopA.暂停){
loopA.play();
pButtonA.className=“”;
pButtonA.className=“暂停”;
}否则{
loopA.pause();
pButtonA.className=“”;
pButtonA.className=“fa-fa-play”;
loopA.currentTime=0
} 
}
loopA.addEventListener('ended',function(){
//执行此功能时,音频已结束。
pButtonA.className=“”;
pButtonA.className=“fa-fa-play”;
},假);

显示元素#playA@JoelGarciaNu尼诺,我在上面加了代码。谢谢你的关注!检查而不是jQuery您可以使用addEventListener的可能重复项确保将
addEventListener()
行放在函数
playAudioA()
之外。按照现在的方式,每次单击按钮都会添加新的事件侦听器,这可能会导致不必要的行为。