AudioContext playback without preloading time Apologies if this is old news, but it's been a huge revelation to me :) The MP3 file is 5.2MB For some reason, probably because the spec has changed since the article "Getting Started with Web Audio API" in http://www.html5rocks.com/en/tutorials/webaudio/intro/ was published, the most common way of loading a file sound is something like:
var oReq = new XMLHttpRequest(); oReq.open( 'GET', fileName, true); oReq.responseType = 'arraybuffer'; oReq.onload = function (oEvent) { var arrayBuffer = oReq.response; // do arrayBuffery things, probably with AudioContext.context.decodeAudioData }; oReq.send(null);
Which forces the browser to download the file completely before starting decoding. That's inconvenient because it's not necessary -AudioElement doesn't do that- and because it makes loading process unecessarily long. So it turns out this works:
var context = new AudioContext(); var a = document.createElement( 'audio' ); a.src = trackName; a.play(); var audioSource = context.createMediaElementSource( a ); audioSource.connect( context.destination );
The browser will start playing almost right away. You can connect all the nodes you want, it all works the same Tested with Chrome, Firefox, Opera and Safari OSX; Chrome and Firefox Android. Haven't tried personally iOS, but I have reports that works with 6 and 7