Web Audio API

Efficient low level audio api

Jerome Etienne

Who Am I

Learning Three.js

Contacts

So how to play sound on the web ?

Alternatives for Sound

old ways: plugins

recent ways: audio tag

new ways: Web Audio API and mozilla API

Web Audio API

Mozilla Audio API

Compatibility

so what about Web Audio API

Web Audio API in a few word

Availability

Sure but how to play a sound ?

Basics code

First, Init It!

Feature Detection

var hasWebkitAudio = typeof(webkitAudioContext) === "function";

Initialisation

var context = new webkitAudioContext();

Load a sound to get a buffer 

function loadSound(url, ctx, onSuccess, onError) {
    // init request
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer'; // <= here secret sauce!

    // function called once data is loaded
    request.onload = function(){
        // request.response === encoded... so decode it now
        ctx.decodeAudioData(request.response, function(buffer) {
            onSuccess && onSuccess(buffer);
	}, function(){
            onError && onError();
        });
    }

    request.send();	// Start the request
}

Basic sound playing 

function playSound(ctx, buffer) {
    // create a 'bufferSource' node
    var source = ctx.createBufferSource();
    // setup the buffer
    source.buffer = buffer;
    // connect it to context destination
    source.connect(ctx.destination);
    // play immediatly
    source.noteOn(0);
}

Steps for Basic sound playing

  1. Create a audio context
    • new webkitAudioContext()
  2. Load the audio buffer
    • request.responseType = 'arraybuffer';
  3. Connect a buffer source to the context destination
    • src.connect(ctx.destination);
  4. Trigger a play
    • source.noteOn(0);

Ok we got basic code...

What about those nodes ?

Routes of Nodes

Nodes and Routing

What is Routing ?

a Simple Route

a More Complex Route :)

Nodes and Routing

Relation between the two

Tuning

Which type of node exists ?

List of nodes

AudioNodes

Featured

AudioPannerNode: positions/spatializes in 3D

the spec / the demo

Source Position

void setPosition(in float x, in float y, in float z);
void setOrientation(in float x, in float y, in float z);// in degree
void setVelocity(in float x, in float y, in float z);

Listener Position

Same position/speed functions for AudioListener 

attribute float gain;	// linear gain (default 1.0)     
attribute float dopplerFactor;	// same as OpenAL (default 1.0)          
attribute float speedOfSound;	// in meters / second (default 343.3)

AudioPannerNode: Directional sound cone 

attribute float coneInnerAngle;	// gain 1.0 in InnerAngle
attribute float coneOuterAngle;	// linear gain decrease
attribute float coneOuterGain;	// gain when in OutterGain

JavaScriptAudioNode: real time processing in js

the spec

Flexible

Performance

AudioGainNode: change the gain/volume 

var gainNode = ctx.createGainNode();
gainNode.gain = 2.0;

BiquadFilterNode: common low-order filters

the spec

Implemented filters

ConvolverNode: common low-order filters

the spec

Environment "simulation"

the Demo

Recipe for Routes

First the begining of route ?

Recipe per sound

Explaination

What about the End of route ?

Clipping: what is it

Definition: When sound go beyond possible ranges

Visuals

Sounds

Clipping: how to detect and avoid it

Detection

if( Math.abs(buffer[i]) >= 1 )	clipping	 = true;

Avoidance

Dynamic Compressor

What is it

Usage

var compressor = context.createDynamicsCompressor();
mix.connect(compressor);
compressor.connect(context.destination);

a Good End of the Route?

Explaination

Wrapping up

Ressource (mainly on html5rocks)

Intro

Advanced

Misc

Conclusion

Pro

Issues

That's all folks.

Question ?

Jerome Etienne