javascript - jQuery确定音频是否已完成播放并在此之后触发功能

Question

我已经从JavaScript文件生成了音频链接，并使用jQuery触发了音频播放。我想在音频结束时触发一个功能。

这是我的HTML。

<div id="audio-holder" class="text-center">

</div>

从javascript对象动态创建元素:

$.each( page15, function( key, value ) {
    $("#audio-holder").append(
          "<span class='word' data-audio-path='"+value.audio+"'>"+value.word+"</span>"
    )});

这是播放器代码:

$( ".word" ).each(function(index) {
     $(this).on("click", function(){
         var audioSrc = $(this).attr("data-audio-path");
         var audioElement = document.createElement('audio');
         audioElement.setAttribute('src', audioSrc);
         audioElement.play();

         // Here goes custom function
     });
});

另一个问题是，如果单击一个单词会播放一个音频，同时单击另一个音频会与先前的音频一起播放。新音频开始时如何停止上一个音频。

Answer 1

您可以检查ended事件，然后执行您的工作。

yourAudio.addEventListener("ended", function(){
     yourAudio.currentTime = 0;
     console.log("ended");
});