html - Setting the granularity of the HTML5 audio event 'timeupdate'

Question

I'm trying to create a simple looping feature using HTML5 audio and have a very primitive solution as follows:

$(audio).bind('timeupdate', function() {
  if (audio.currentTime >= 26){
    var blah = audio.currentTime; 
    audio.currentTime = 23;
    console.log(blah);
  }
})

This works fine but the only glitch here is that the timeupdate event doesnt trigger very consistently. For instance, the console.log above returned: 26.14031982421875

26.229642868041992

26.13462257385254

26.21796226501465

...etc. (You get the idea..inconsistent times)

Obviously this won't work for an application where the timing is important (music applications). So the obvious solution to me would be to increase the granularity with which the timeupdate event is triggered. I havent been able to find any API docs...but would love to know if there is a way to do this.

Answer 1

It should be noted that you can read the currentTime property of a video much more often. If time is really critical, and you can live with a little bit of uncertainty, you can try this instead.

It is, however, a lot less elegant than using the tag's own timeupdate event.

setInterval(function () {
    console.log(audio.currentTime); // will get you a lot more updates.
}, 30);

In this case, you'll have to manage the interval yourself, make sure that you clear it before nulling the audio element. But it is a possibility.

I'm using this approach on a video element, but it should apply here, too.