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

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.

javascript html audio html5-audio

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.

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

javascript html audio html5-audio

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

CodeHunter