Web Audio API in 15 minutes

Ran Ben Aharon Front End lead at Everything

MIND = BLOWN

Wait.. there’s <audio> already

Gaming features

Precise timing

Timing control

3D spatialization

Filters and effects

Precise timing

Timing control

Background music

Looping

Cross fading

Sounds effects

Recurring sounds

Real-time manipulation

3D spatialization

Doppler effect

Filters and room effects

Convolution demos

Musical webapps

Musical webapps

Drum machine

Karaoke player

Full blown mixer

Wave editor

Instrument simulations

Effects studio

Audio visualizations

Audio visualizations

Html5-demos

Ring visualizer

Three audio

Y u no show code?

Basics - nodes

Types

Source (file, oscillator, stream..)

Filters and effect (reverb, gain, convolver..)

Destination (audio output, speakers..)

Basics - routing

Source Destination

Basics - routing

file.mp3 Speakers

Basics - routing

Source Destination Effect Effect

Basics - routing

file.mp3 Speakers Volume Reverb

Basics - routing

Best way to demonstrate – Reactable!

You promised code!

Basic code

var context = new AudioContext();

function playSound(buffer) {

var source = context.createBufferSource();

source.buffer = buffer;

source.connect(context.destination);

source.noteOn(0);

}

Basic code

var context = new AudioContext();

function playSound(buffer) {

var source = context.createBufferSource();

source.buffer = buffer;

var gainNode = context.createGainNode();

gainNode.gain = 0.5;

source.connect(gainNode);

gainNode.connect(context.destination);

source.noteOn(0);

}

Let’s do something cool

Demo

Hulk speech http://ranbena.github.com/hulk-speech/

Ran Ben Aharon Front End lead at Everything

ran@everything.me

/ranbena

/ranbena

WE’RE HIRING! Front End ninjas plz

http://corp.everything.me/jobs