Audio in the Browser

Lonce Wyse

Communication and New Media

lonce.wyse@nus.edu.sg

Overview

• Web Audio API
• Why the browser?
• Related technologies
  • Sensor access
  • GetUserMedia
  • node.js
  • WebRTC

Web Audio API

• Bullet One
• Bullet Two
• Bullet Three

Flow graph model

What the code looks like

function play(semitone) {
  // Create some sweet sweet nodes.
  var oscillator = context.createOscillator();
  oscillator.connect(context.destination);
  // Play a sine type curve at A4 frequency (440hz).
  oscillator.frequency.value = 440;
  oscillator.detune.value = semitone * 100;
  // Note: this constant will be replaced with "sine".
  oscillator.type = oscillator.SINE;
  oscillator.start(0);
}

Resources

• Web Audio API spec
  • http://www.w3.org/TR/webaudio/
• HTML5 Rocks Web Audio API Intro
  • http://www.html5rocks.com/en/tutorials/webaudio/intro/
• Boris Smus O'Reilly Book
  • http://chimera.labs.oreilly.com/books/1234000001552/index.html
• DEMOS
  • Chris Wilson
    • http://webaudiodemos.appspot.com/
  • Web Audio page
    • https://chromium.googlecode.com/svn/trunk/samples/audio/samples.html
  • Boris Smus (demos for new book to come out)
    • http://webaudioapi.com/samples/