Question

我正在使用以下代码尝试使用HTML5 Audio API播放声音片段：

HTMLAudioElement.prototype.playClip  = function(startTime, stopTime) { 
  this.stopTime = stopTime;
  this.currentTime = startTime;
  this.play();
  $(this).bind('timeupdate', function(){
    if (this.ended || this.currentTime >= stopTime) {
      this.pause();
      $(this).unbind('timeupdate');
    }
  });

}

我使用这个新的playClip方法如下。首先，我有一些data属性的链接：

<a href=# data-stop=1.051 data-start=0.000>And then I was thinking,</a>

最后这个jQuery运行在$(document).ready上以挂接点播链接上的点击：$（'a'）。click（function（ev）{

  $('a').click(function(ev){

    var start = $(this).data('start'),
        stop = $(this).data('stop'),
        audio = $('audio').get(0),
        $audio = $(audio);

    ev.preventDefault();

    audio.playClip(start,stop);


  })

这种方法似乎有效，但有一个令人沮丧的错误：有时，给定剪辑的播放超出了正确的data-stop时间。

我怀疑它可能与timeupdate事件的时间有关，但我不是JS大师，我不知道如何开始调试问题。以下是我收集的一些线索：

同样的行为似乎出现在FF和Chrome中。
给定剪辑的播放实际上似乎有所不同 - 如果我连续几次播放相同的剪辑，则每次播放时可能会过度播放不同的时间。

这里的问题是Audio API的固有准确性吗？我的应用需要几毫秒。

我使用jQuery绑定和取消绑定timeupdate事件的方式有问题吗？我尝试使用jQuery-less方法addEventListener，但我无法让它工作。

先谢谢，我真的很想知道出了什么问题。

Answer 1

timeupdate事件每秒仅发射3-4次左右，精确到毫秒级。然后再次优于setTimeout / setInterval，如果标签在Google Chrome中不活跃（音频文件侦听的常见用例），则每秒仅触发一次。

但是，如果在您的应用中，您可以确保该标签在收听时处于活动状态，那么setTimeout或setInterval会更好，因为它可以每秒触发100次。

播放HTML5 Audio API时出现问题

1 个答案: