在 html5 音频元素结束播放前 5 秒执行 Javascript 代码

Execute Javascript code 5 seconds before html5 audio element reaches end of playback

本文关键字：执行 Javascript 代码 播放 html5 音频 元素 结束      更新时间：2023-09-26

我正在使用一个默认的audio元素（不向用户提供控制权），我通过jQuery与之交互（更改源，播放/暂停 - 通常）。现在我正在尝试淡入下一个轨道（第二个音频元素），提前 5 秒开始以实现无缝过渡。

从

我从媒体事件和音频元素属性页面收集到的信息来看，默认情况下没有方法可以执行此操作 - 最接近的东西似乎是onended事件（显然触发得太晚了）和loop属性，它有同样的问题。

我将我之前的尝试分离为答案，以从未回答的队列中删除问题，但它最初包含在此处

任何关于更有效地解决这个问题的帮助，以我错过的方式，或改进我现有的解决方案，都非常感激！提前谢谢。

此时，我看到的唯一解决方案是提前检查曲目的持续时间，然后设置以下超时：

$('audio').bind('loadedmetadata', function() {
  duration = $(this).prop('duration') * 1000; // get duration in milliseconds
  var fadetimer = setTimeout(function(){
    // set up next audio file
  }, duration - 5000); // execute timeout 5 seconds before end of playback
});

然而，这对我来说似乎效率很低。我也不确定此方法是否会在后台运行"垃圾"超时或事件绑定，这最终会增加并减慢应用程序的速度。

相关文章：