The Web Audio API uses an AudioBuffer for short to medium length sounds. The basic approach is to use XMLHttpRequest.
Here's a small code snippet for loading a single AudioBuffer.
var dogBarkingBuffer = 0; var context = new webkitAudioContext(); function loadDogSound(url) { var request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "arraybuffer"; request.onload = function() { // Decode asynchronously context.decodeAudioData( request.response, function(buffer) { dogBarkingBuffer = buffer; } ); } request.send(); }
Of course, it would be better to create a more general loading system which isn't hard-coded to loading this specific sound. There are many approaches for dealing with the many short to medium length sounds that an audio application or game would use - here's one way using a BufferLoader class:
function BufferLoader(context, urlList, callback) { this.context = context; this.urlList = urlList; this.onload = callback; this.bufferList = new Array(); this.loadCount = 0; } BufferLoader.prototype.loadBuffer = function(url, index) { // Load buffer asynchronously var request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "arraybuffer"; var loader = this; request.onload = function() { // Asynchronously decode the audio file data in request.response loader.context.decodeAudioData( request.response, function(buffer) { if (!buffer) { alert('error decoding file data: ' + url); return; } loader.bufferList[index] = buffer; if (++loader.loadCount == loader.urlList.length) loader.onload(loader.bufferList); } ); } request.onerror = function() { alert('BufferLoader: XHR error'); } request.send(); } BufferLoader.prototype.load = function() { for (var i = 0; i < this.urlList.length; ++i) this.loadBuffer(this.urlList[i], i); }
Here's how the BufferLoader class can be used. In this simple example, two AudioBuffers are created and when they are finished loading, they are played back at the same time.
window.onload = init; var context; var bufferLoader; function init() { context = new webkitAudioContext(); bufferLoader = new BufferLoader( context, [ "./SoundsforAudioAPI/MutTon180msec.wav", "./SoundsforAudioAPI/MutTon180msec.wav", ], finishedLoading ); bufferLoader.load(); } function finishedLoading(bufferList) { // Create two sources and play them both together. var source1 = context.createBufferSource(); var source2 = context.createBufferSource(); source1.buffer = bufferList[0]; source2.buffer = bufferList[1]; source1.connect(context.destination); source2.connect(context.destination); source1.noteOn(0); source2.noteOn(0); }