I'm using the following code to try to play a sound clip with the 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');
}
});
}
I utilize this new playClip method as follows. First I have a link with some data attributes:
<a href=# data-stop=1.051 data-start=0.000>And then I was thinking,</a>
And finally this bit of jQuery which runs on $(document).ready to hook up a click on the link with the playback: $('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);
})
This approach seems to work, but there's a frustrating bug: sometimes, the playback of a given clip plays beyond the correct data-stop time.
I suspect it could have something to do with the timing of the timeupdate event, but I'm no JS guru and I don't know how to begin debugging the problem. Here are a few clues I've gathered:
The same behavior appears to come up in both FF and Chrome.
The playback of a given clip actually seems to vary a bit -- if I play the same clip a couple times in a row, it may over-play a different amount of time on each playing.
Is the problem here the inherent accuracy of the Audio API? My app needs milliseconds.
Is there a problem with the way I'm using jQuery to bind and unbind the timeupdate event? I tried using the jQuery-less approach with addEventListener but I couldn't get it to work.
Thanks in advance, I would really love to know what's going wrong.
