Web Audio API

By  on  

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:

Have you done anything awesome with Web Audio?  Please share with the noobs like me!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

  • By
    dwProgressBar v2:  Stepping and Events

    dwProgressBar was a huge hit when it debuted. For those of you who didn't catch my first post, dwProgressBar is a MooTools 1.2-based progress bar which allows for as much flexibility as possible. Every piece of dwProgressBar can be controlled by CSS...

Discussion

  1. Plopz

    Its funny that you commented every line except the most important.

    source.connect(audioContext.destination);
    

    The magic of the audio api is that you can connect, combine and chain together all of these different nodes which operate on I/O to manipulate the data. The Web Audio developer tools in firefox is helpful to visualize these node traversals.

  2. The Web Audio API also includes a built-in synthetiser that you can use to play sounds without using sound file. I worked on a musical game during a hackathon where you can compose music with strangers or friends: http://polytun.es/

    Also, Pizzicato is a great library to create to create and manipulate sounds with the Web Audio API : https://github.com/alemangui/pizzicato

  3. I made a synthesizer and sound visualizer using the full power of Web Audio API, called Comet. You can find it here:

    https://venerons.github.io/Comet

  4. David,

    We have done cool stuff with the web audio API in conjunction with SoundCTL audio API, doing real time audio streaming and routing.

  5. I made an audio mixer using the Web Audio API here: https://jamesfiltness.github.io/web-audio-mixer/ Have a go at mixing David Bowie’s Space Oddity!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!