javascript - 完成音频文件后的调用功能

Question

我在Web应用程序中添加了一个音乐音频播放器。完成音频后，我需要调用一个函数。但是事情是音频长度没有指定。
例如，音频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>