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

Posted 2023-05-07

【中文标题】在 html5 音频元素到达播放结束前 5 秒执行 Javascript 代码

【英文标题】：Execute Javascript code 5 seconds before html5 audio element reaches end of playback

【发布时间】：2016-11-15 07:20:30

【问题描述】：

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

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

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

非常感谢任何有助于更有效地解决此问题、以我错过的方式原生或改进我现有解决方案的帮助！提前致谢。

【问题讨论】：

我也很感谢您对否决票的反馈，或者您需要什么更多信息...

这是最有效的方法。您可能没有想到的一个用例是当用户跳过它会搞砸的音频时。另外，作为最终用户，我不希望程序搞砸我的音量等。

@GamerNebulae：好主意，我可能已经忘记了。然而，在这种情况下，它是背景音乐，因此用户不仅无法控制播放（除了开始和停止播放），而且从一首歌曲淡入下一首曲目也不会有问题。交互性的观点。

我只会编辑音乐，让它在没有任何 javascript 代码干预的情况下消失。它为您省去了很多麻烦。

这可能对你有帮助...current/duration time of html5 video?

【参考方案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
);

然而，这对我来说似乎非常低效。我也不确定这种方法是否会留下“垃圾”超时或在后台运行事件绑定，最终会加起来并减慢应用程序的速度。

【讨论】：

如果用户暂停音频，或者在播放过程中出现一些延迟怎么办？更好的方法是使用timeupdate 事件，当audio.currentTime === audio.duration - 5 然后调用你的函数。

@Kaiido：我现在应该把这个添加到问题中，但是正如我对这个问题的评论，在我的情况下，用户对音频没有任何控制 - 这很简单背景音频。 timeupdate 方法是由 cmets 中的另一位用户暗示的，但就我而言，这种方法似乎是一种资源密集度较低的方法。当然，如果您不同意或有不同的观点，请随时将其发布为答案，我会尝试一下！