HTML5 audio stops buffering prematurely
Matt Westcott
I'm trying to use the HTML5 audio object for the soundtrack of a
Javascript-based animation, but I'm finding that on FF3.5 it stops
buffering shortly after firing the 'canplay' event, after receiving 64K
or so of audio data - at that point, the audio object's networkState
attribute becomes 1 = NETWORK_IDLE. Here's my code (with Firebug
debugging included):
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function go() {
console.log('starting');
var audio = new
Audio('http://antisocial.demozoo.org/demo/track07.ogg');
window.addEventListener('unload', function() {
audio.pause();
}, false);
audio.addEventListener('progress', function(e) {
console.log('progressing - ' + e.loaded + ' of ' + e.total);
console.log(e);
}, false);
audio.addEventListener('canplaythrough', function() {
console.log('can play through');
audio.play();
}, false);
audio.addEventListener('canplay', function() {
console.log('can play');
// audio.play();
}, false);
audio.load();
console.log(audio);
}
</script>
</head>
<body onload="go()">
</body>
</html>
The only way I've been able to continue buffering data is to start
playing the file (from within the 'canplay' event handler) - however,
for fairly obvious reasons I don't want to start playing until
'canplaythrough' is fired, and right now that never happens. Trying to
kick-start it with a fresh audio.load() doesn't help - it invariably
starts loading from the start of the file again...
So, is there any way to persuade Mozilla to keep buffering data up to
the point where it can fire 'canplaythrough'? I've tried this on fast
and slow connections alike with no joy, and the same code happily
buffers to the end on Safari (provided you replace the .ogg with an
.mp3, natch...)
Cheers,
- Matt