javascript - 在 html5 音频元素到达播放结束之前 5 秒执行 Javascript 代码

Question

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

根据我从 media events 收集到的信息和 audio element attributes页面，默认情况下不存在执行此操作的方法 - 现有的最接近的事情似乎是 onending 事件(显然，它触发得太晚了)和 loop 属性，也有同样的问题。

I seperated my previous attempt into an answer to remove the question from the unanswered queue, but it originally was included here

非常感谢任何能够以我错过的方式更有效地解决这个问题的帮助，或者改进我现有的解决方案!提前致谢。

Answer 1

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

$('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
});

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