完成音频文件后调用函数

Question

我在我的网络应用程序中添加了一个音乐音频播放器。完成音频后，我需要调用一个函数。但问题是没有指定音频长度。

例如，10 秒音频完成然后调用一个函数，7 秒音频然后调用一个函数。

这意味着一旦音频完成，然后调用函数来发生事件。不应指定音频长度。

这是我的音频播放器代码

<audio controls="controls" controlsList="nodownload" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 4000)">

<source src="'.str_replace("\'","'", $que=$row->question).'" type="audio/mp3" id="my_audio" loop="loop"/>

</audio>

这是我的java脚本代码

setTimeout(

  function() 

  {

    console.log('10 Seconds done')

  }, 10000);

在这里，消息中的代码在 10 秒后通过，但我需要在完成音频后通过消息

Answer 1

你可以用ended事件来做到这一点。ended所以你应该只在你想要的元素上监听事件，如下所示：const audio = document.querySelector("audio");audio.addEventListener('ended', (event) => {&nbsp; console.log('audio has been ended');});<audio controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3">&nbsp; Your browser does not support the <code>audio</code> element.</audio>

Answer 2

使用该onended功能。<audio controls="controls" controlsList="nodownload" onended="console.log('ended!');">&nbsp; <source src="///file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" id="my_audio"></audio>你也可以试试：$('#my_audio').parent().play().then(() => {&nbsp; const checkAudio = () => {&nbsp; &nbsp; if ($('#my_audio').parent()[0].ended) {&nbsp; &nbsp; &nbsp; console.log('ended!');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; setTimeout(checkAudio, 100);&nbsp; &nbsp; };&nbsp; };});&nbsp; &nbsp; <audio controls="controls" controlsList="nodownload">&nbsp; &nbsp; &nbsp; <source src="///file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" id="my_audio">&nbsp; &nbsp; </audio>