Question

我正在使用HTML5音频。对于我的用例，我需要监听播放的音频持续时间，一旦超过某个阈值，就暂停音频。如下所示：

$(audio).bind('timeupdate', function() {
  if (audio.currentTime >= 10){
     audio.pause();
  }
});

我注意到，当我的处理程序执行时，audio.currentTime在10.12878，10.34023等附近，因此，在暂停之前会播放一些额外的音频。< / p>

另一个question似乎记录了同样的问题。问题是在2012年的日期，所以我想知道现有技术是否有所改进。

如果没有，还有哪些其他方法可以更精确地执行此操作？我之前没有使用音频，我真的很感激帮助。

Answer 1

根据MDN文档，timeupdate事件

事件频率取决于系统负载，但会是在大约4Hz和66Hz之间抛出（假设事件处理程序没有运行时间超过250毫秒）。鼓励用户代理改变事件的频率基于系统负载和平均成本每次处理事件，以便UI更新不是任何比用户代理更频繁，可以舒适地处理解码视频。

要暂停10.0nnnnn的音频，您可以使用requestAnimationFrame; if条件this.currentTime > 9.999在到达.pause()之前致电10.000000。请注意，9.999可以调整到9.9到9.99750之间，这也可以定期暂停9.99nnnn处的音频;也就是说，在到达10.0

之前

var requestAnimationFrame = window.requestAnimationFrame;

var audio;

function trackCurrentTime() {
  // `this` : `audio`
  console.log(this.currentTime);
  if (this.currentTime > 9.999) {
    this.pause();
  } else {
    requestAnimationFrame(trackCurrentTime.bind(this))
  }
}

var request = new XMLHttpRequest();
request.open("GET", "/path/to/audio", true);
request.responseType = "blob";
request.onload = function() {
  if (this.status == 200) {
    audio = new Audio(URL.createObjectURL(this.response));
    audio.onpause = function(e) {
      console.log(e.target.currentTime)
    }
    audio.load();
    audio.play();
    trackCurrentTime.call(audio);
  }
}
request.send();

jsfiddle http://jsfiddle.net/Lg5L4qso/7/

Answer 2

所以我研究了解决这个问题的方法并得出以下结论：

1）HTML音频不适用于这种情况。它是一个非常有限的API，不提供细粒音频控制。 Web Audio API是实现这一目标的方法。

2）Web Audio API不是最容易阅读/理解的东西，可能在各种浏览器中实现性差。最好找到一个漂亮的包装器，当浏览器中没有Web Audio时，它会回退到网络音频或闪存。

3）存在一些包装器，如howler.js，sound.js和SoundManager2。 ~~关闭三个SoundManager2似乎是最初的想法。 http://www.schillmania.com/projects/soundmanager2/demo/api/的演示4G有效地解决了与问题中的场景非常相似的问题。~~

更新：SoundManager2实际上不支持网络音频API。来自technotes：

SM2目前不使用Webkit Audio API。它可能是在未来的某个时刻以实验或更正式的方式添加，当API得到更普遍支持时。

Answer 3

HTML音频对于这种情况来说并不骰子。它是一个非常有限的API，并没有提供细粒音频控制。 Web Audio API是实现这一目标的方法。

Html5音频timeupdate精度

3 个答案: