Modern Web Audio Javascript Library

by James Simpson / @GoldFireStudios

Hi, I'm James

BROWSER AUDIO IS A CHALLENGE

• Fragmented codec support
• HTML5 Audio/Web Audio
• Mobile works differently
• Etc..

• Defaults to Web Audio API, falls back to HTML5 Audio
• Auto loads and plays the correct file format
• Automatic caching and pooling of sounds
• Per-sound and global controls
• Sound sprites
• Play, pause, mute, fade, loop, etc
• 3D positional sound (Web Audio API only)
• No outside libraries
• Lots of cross-browser audio fixes

USING HTML5 AUDIO

/* create audio node */
var audio = new Audio();
audio.src = 'audio/sounds.mp3';
audio.volume = 1;

/* play audio */
audio.play();

/**
 * Several issues:
 * 1. You have limited control. (play, pause, mute, seeking)
 * 2. If you wan't cross-browser support, must load multiple files.
 * 3. Not performant enough for SFX.
 * 4. Can't play multiple sounds on mobile.
 */
					

USING WEB AUDIO API

/* create gain node */
var gainNode, bufferSource;
var volume = 1;
gainNode = ctx.createGain();
gainNode.gain.value = volume;
loadBuffer('audio/sounds.mp3');

/* load the audio data */
var loadBuffer = function(url) {
  // load the buffer from the URL
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function() {
    // decode the buffer into an audio source
    ctx.decodeAudioData(xhr.response, function(buffer) {
      if (buffer) {
        bufferSource = ctx.createBufferSource();
        bufferSource.buffer = buffer;
        bufferSource.connect(gainNode);
        bufferSource.start(0);
      }
    });
  };
  xhr.send();
};
					

USING HOWLER.JS

/* setup sound sprite for SFX */
var sound = new Howl({
  urls: ['audio/sounds.mp3', 'audio/sounds.ogg'],
  sprite: {
    jump: [0, 600],
    move: [2000, 210],
    lose: [4000, 3150]
  }
});

/* setup background audio */
var theme = new Howl({
  urls: ['audio/theme.mp3', 'audio/theme.ogg'],
  buffer: true,
  loop: true
});

/* play sound effects */
sound.play('jump');
sound.play('move');
sound.play('lose');

/* play background music */
theme.stop().play();
					

// the Howler objects controls global audio
Howler.unmute();
					

Future of howler.js

• Full audio engine
• More of a focus on Web Audio
• 3D sound, filters, mixing, etc..
• Streamlined and further simlified API

THANKS!