Web Audio API Overview

Andy Sylvester

Reveal.js Created by Hakim El Hattab / @hakimel

Agenda

  • What is the Web Audio API?
  • Some examples

What is the Web Audio API?

  • A high-level JavaScript API for processing and synthesizing audio in web applications.
    • Includes capabilities found in modern game audio engines
    • Includes some of the mixing, processing, and filtering tasks that are found in modern desktop audio production applications.
  • API is being developed under the auspices of the World Wide Web Consortium
  • HTML Rocks has a good overview article

Where can the API be used?

  • Web Audio API support is included in most modern browsers (Chrome, Firefox, etc.)
  • Javascript is used to call API functions
    • Embedded script within a web page
    • Javascript included via HTML script tag

How does the API work?

  • An AudioContext is the 'platform' or 'canvas' for creating Web Audio elements

How does the API work?

Frameworks


var osc;
var oscType = 'sine';
var volume;
var frequency = 600;

volume = tsw.gain(0.5);

function turn_on() {
     osc = tsw.oscillator (frequency, oscType);
     tsw.connect(osc, volume, tsw.speakers);
     osc.start();
};

function turn_off() {
     osc.stop();
};
					

Examples

Press Play to hear how the pitch sounds

Change the pitch

Press Stop to turn it off.

Play a chord

Stop the chord

Play a scale

Sine Square Triangle Sawtooth

More Example Applications

The End

Thanks for listening!