jQuery确定音频是不是播放完毕并在此之后触发功能

Posted 2023-02-25

【中文标题】jQuery确定音频是不是播放完毕并在此之后触发功能

【英文标题】：jQuery determine if a audio is finished playing and trigger function after thatjQuery确定音频是否播放完毕并在此之后触发功能

【发布时间】：2020-05-09 13:13:41

【问题描述】：

我从一个 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
     );
);

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

【参考方案1】：

您可以查看ended 事件，然后执行您的操作。

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

【讨论】：

如何摆脱一次播放多个音频？

最简单的方法是循环播放所有音频并检查它们的状态并停止它们。

但所有这些都是动态/虚拟 DOM。我试图访问它们，但无法

如果您可以分享您的问题的代码框链接，那么所有人都更容易理解确切的问题