完成音频文件后调用函数

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) => {

  console.log('audio has been ended');

});

<audio controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3">

  Your browser does not support the <code>audio</code> element.

</audio>

Answer 2

使用该onended功能。

<audio controls="controls" controlsList="nodownload" onended="console.log('ended!');">

  <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(() => {

  const checkAudio = () => {

    if ($('#my_audio').parent()[0].ended) {

      console.log('ended!');

    } else {

      setTimeout(checkAudio, 100);

    };

  };

});

    <audio controls="controls" controlsList="nodownload">

      <source src="///file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mp3" id="my_audio">

    </audio>