How can I force an HTML5 audio element to buffer an entire song?

Question

I'm developing a local server that will stream a user's audio files so they can access them via web browsers using the HTML5 audio object. Since these files are on the user's computer, I expect the files to be buffered completely when they are loaded, but for certain large files, the songs get buffered part of the way, then stop, and resume buffering some time later.

My question is: how can I force the audio object to buffer the entire song at once? Can I do this from javascript, do I have to set an attribute on the audio object, or is there anything else I can do?

Solution 1

The solution I found was this:

function load() {
    a.play();
    setTimeout("a.pause()", 10);
}

Play the file and pause it 10ms later, then the browser will buffer the entire song.

Solution 2

You can use the load() method. This basically forces preload="auto". But it probably won't buffer the whole thing.

I had the issue that audio wasn't preloaded on mobile devices (even with preload=auto), but this method worked.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#dfnReturnLink-2

Another option is to load the data via an XMLHttpRequest as a binary blob and set the <audio> element's src attribute to the blob URI.

(I personally don't really like the play/pause hack.)

Solution 3

You could set the preload="auto" attribute. It's not guaranteed to do anything, but it's supposed to tell the user agent to buffer as much as it wants without concern for the remote end. http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#attr-media-preload

Comments

[Tamas Czinege]

setTimeout(a.pause, 10) is better karma

[Ahi Tuna]

That works when your not passing the function any variables, sure. But why bother switching back and forth between two methods?

[nickf]

@DrJokepu Actually, that wouldn't work, since you'd lose the context of the function. Better: setTimeout(a.pause.bind(a), 10)