The Web Audio API allows developers to load and decode audio on demand using JavaScript. The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn’t touch. The following is a very basic introduction to the WebAudio API, often used for JavaScript games or apps allowing modification of audio on the front end.
Let’s start with a reduced Web Audio API code sample:
// Create an AudioContext instance for this sound var audioContext = new (window.AudioContext || window.webkitAudioContext)(); // Create a buffer for the incoming sound content var source = audioContext.createBufferSource(); // Create the XHR which will grab the audio contents var request = new XMLHttpRequest(); // Set the audio file src here request.open('GET', 'sound-effect.mp3', true); // Setting the responseType to arraybuffer sets up the audio decoding request.responseType = 'arraybuffer'; request.onload = function() { // Decode the audio once the require is complete audioContext.decodeAudioData(request.response, function(buffer) { source.buffer = buffer; // Connect the audio to source (multiple audio buffers can be connected!) source.connect(audioContext.destination); // Simple setting for the buffer source.loop = true; // Play the sound! source.start(0); }, function(e) { console.log('Audio error! ', e); }); } // Send the request which kicks off request.send();
I’ve tried to comment within the code to describe the process as best as possible. Remember that the above is a very reduced example; there’s much more you can do with Web Audio.
I won’t pretend to be an expert of all the nuances with Web Audio — I was simply super excited to see all of this working. Web Audio does way more than simply allow you to play the audio; you can modify the audio with filters, ramping, and a bunch more. You can learn more about WebAudio from these awesome sources:
Getting Started with Web Audio API
Have you done anything awesome with Web Audio? Please share with the noobs like me!
