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

我已经从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
     });
});

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