HTML5 Audio API播放的时间问题

Timing issues with playback of the HTML5 Audio API

本文关键字:时间 问题 播放 Audio API HTML5      更新时间:2023-09-26

我使用以下代码来尝试使用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。
  • 一个给定片段的播放实际上似乎有所不同——如果我连续播放同一片段几次,它可能会在每次播放时播放不同的时间。

这里的问题是音频API的固有准确性吗?我的应用需要毫秒。

我使用jQuery绑定和解绑定timeupdate事件的方式有问题吗?我尝试使用jQuery-less方法与addEventListener,但我不能让它工作。

提前谢谢,我真的很想知道出了什么问题。

timeupdate事件每秒只触发3-4次,精度远达不到毫秒。再一次,它比setTimeout/setInterval更好,如果标签在谷歌浏览器中不活跃(音频文件侦听的常见用例),每秒只触发一次。

然而,如果在你的应用程序中,你可以确保标签在监听时处于活动状态,那么setTimeoutsetInterval更好,因为它可以每秒触发100次。

相关文章: