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");
});