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

Answer 1

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

Answer 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.)

Answer 3

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.