Web Audio API









Chinmay Pendharkar
September 2013

About Me..



Acoustician / Audio Engineer


Developer (Audio)


Podcaster (WeBuildSG Live)



Geek

Audio + Web History



Browsers in the 90s - #FAIL



Plugins save the day?



Flash, Java, .. (urgh!!)

Plugin Free Web!


Why?

Lean(er) Stack
        Website > Browser > OS
                        Website > Plugin > Browser > OS


Less breakable parts  (theoretically)



 ↓  Reliance on single party  (Adobe)

Web + Audio


Before

Flash , Java (Urgh!!)



After

HTML5 Audio,  WebAudio,  WebRTC*,  WebMIDI*


* Ongoing W3C Standardization process

HTML5 Audio


<audio> / HTMLAudioElement()

Part of the DOM Elements.

Allows basic playback of Audio files.

Basic functionality support in all Major browsers.

<audio controls="controls">
	Your browser does not support the <code>audio</code> element.
	<source src="http://bit.ly/deepmp3" type="audio/wav">
</audio>

HTML5 Audio Features


Autoplay 
(hello! 1990s called they want their website back)

Loop 
audioTag.loop = true;

Speed  
audioTag.playbackRate = 2;



Stop horsing around..




Give us the good stuff!!


Web Audio API


" JavaScript API for processing and synthesizing audio"


JavaScript API


Audio Processing is usually done at a lower level (C++/ASM)


Realtime => Callback Based

Web Audio API


"signal routing graph paradigm"


WebAudio VIPs


AudioNode Everything is an AudioNode

AudioContext - God of WebAudio. Everything begins and ends here.
myContext = new webkitAudioContext();
Destination - Main Audio output. Plug everything into this..
source = context.createOscillator();
source.connect(myContext.destination);

Pitch
Volume

AudioNodes



  • Analyser
  • BiquadFilter
  • Buffer
  • BufferSource
  • ChannelMerger
  • ChannelSplitter
  • Convolver
  • Delay
  • DelayNode
  • DynamicsCompressor



  • GainNode
  • JavaScriptNode
  • MediaElementSource
  • MediaStreamDestination
  • MediaStreamSource
  • Oscillator
  • Panner
  • ScriptProcessor
  • WaveShaper
  • WaveTable

Filter

var audio = new Audio();
audio.src = 'https://dl.dropboxusercontent.com/u/77191118/DeepIntoIt.mp3';
source = context.createMediaElementSource(audio);
var filter = context.createBiquadFilter();
filter.type = filter.LOWPASS;
filter.frequency.value = 5000;

source.connect(this.filter);
filter.connect(context.destination);
						


Pause/Play

Filter Cutoff

Convolver

var source = context.createBufferSource();
var convolver = context.createConvolver();

source.connect(convolver);
convolver.connect(context.destination);

/*Load source audio and impulse response*/
var request = new XMLHttpRequest();
var ir_request = new XMLHttpRequest();
request.open("GET", "https://dl.dropboxusercontent.com/u/77191118/deep10.mp3", true);
request.responseType = "arraybuffer";
request.onload = function () {
	context.decodeAudioData(request.response, function (decodedBuffer){
		source.buffer = decodedBuffer
		if (convolver.buffer){
			source.start(0);
		}
	});
}
ir_request.open("GET", "https://dl.dropboxusercontent.com/u/77191118/church_ir.wav", true);
ir_request.responseType = "arraybuffer";
ir_request.onload = function () {
	context.decodeAudioData(request.response, function (decodedBuffer){
	convolver.buffer = decodedBuffer
		if (source.buffer){
			source.start(0);
		}
	});
}
ir_request.send();
request.send();

Hall :
Can :

Demos


Synth :
http://synth.soundkeep.com/

Sequencer :
http://labs.dinahmoe.com/ToneCraft/

WavePad :
http://alxgbsn.co.uk/wavepad/

Games :
http://chrome.angrybirds.com/

Resources


http://www.html5audio.org/


http://www.w3.org/wiki/HTML/Elements/audio


https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html


http://www.html5rocks.com/en/tutorials/webaudio/intro/

More Resources


http://animatedsoundworks.com:8001/


https://github.com/web-audio-components


https://github.com/cwilso/WebAudio


https://github.com/audiocogs

What's coming?



WebRTC (getUserMedia API)


WebMIDI


asm.js

Final words


Your mileage WILL vary.


Watch out for Browser/OS dependencies for functionality.


Watch out for codec issues (mp3/wav/ogg).


Go Play!


Questions?




https://github.com/notthetup/webaudioslides

@ntt