Web Audio

An emerging platform for Audio applications


Music Tech Meetup 2016

- Chinmay Pendharkar

Web Audio

An emerging platform for Audio applications

How to make noise on the Web


Music Tech Meetup 2016

About Me..

Agenda

  • What is WebAudio??
  • Why WebAudio matters??
  • How to use WebAudio??

What??

## What is WebAudio?? - Brower API - One of the "HTML5" family of APIs - Create, Manipulate and output Audio in the Browser

History

  • bgsound
  • <object> , <embed>
  • <audio>
  • Audio Data API
  • Web Audio API
  • ← Flash
  • ← HTML5

Philosophy

... include the capabilities found in modern game audio engines as well as some of the mixing, processing, and filtering tasks that are found in modern desktop audio production applications.

— W3C WebAudio Draft Spec

from https://www.flickr.com/photos/cjsimmons/60361577/
from https://www.flickr.com/photos/ldandersen/89326050
from http://giphy.com/gifs/mario-squish-x2woMnCz4W0Vy
from https://pixabay.com/p-773215/

Status

http://caniuse.com/#search=audio-api

What can you do with WebAudio


  • Musical Instruments
  • Games
  • Immersive Interactive Experiences
  • Communication/Recording
  • Digital Audio Workstations

Why


Why Audio on the Web??

Why Audio on the Web??


→ Distribution


Why Audio on the Web??


→ Collaboration


  • Real-time control (WebSockets)
  • Peer-to-Peer collaboration (WebRTC)
  • Eg. BandLab

Why Audio on the Web??


→ Expression


  • Integration with visual elements
  • Integration with interactive elements
  • Eg. Allen the Alien

How??

"signal routing graph paradigm"

JavaScript API

		            // Create Context and Nodex
var audioCtx = new AudioContext();
var oscillator = audioCtx.createOscillator();
var filter = context.createBiquadFilter();

// Set parameter values
oscillator.detune.value = -400;
filter.type = filter.LOWPASS;
filter.frequency.value = 5000;

// Connect nodes
oscillator.connect(filter);
filter.connect(audioCtx.destination);
		          

Implementation


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

— Chrome Source

Nodes

## Sources - Oscillator - AudioBufferSource - MediaElementAudioSource - MediaStreamAudioSource

Effects

  • Gain
  • BiquadFilter
  • Delay
  • Analyser (FFT)
  • StereoPanner
  • Panner (3D-Panner)
  • Convolver
  • WaveShaper
  • DynamicsCompressor
## Destination - Destination (loudspeaker) - Offline Destination (pre-render) - MediaStreamAudioDestination

Nodes : Connections

		            var context = new window.AudioContext();

var buffer = context.createBufferSource();

buffer.connect(context.destination);
		          

Nodes : Connections

Parameter Automation

		            playRate.setValueAtTime(2, 5);
frequency.linearRampToValueAtTime(400, 2);
delayTime.exponentialRampToValueAtTime(3.1, 10);
pan.setTargetAtTime(-1, 7.2);
gain.setValueCurveAtTime([0, 1, 0.7, 0.7, 0.5, 0.2, 0], 0, 0.5)
		          

Parameters

AudioParams

→ Real-time Control of Nodes

								filter.frequency.value = 400;     // Set Frequency to 400Hz.
filter.Q                          // Filter Q-value
filter.gain                       // Filter gain

oscillator.frequency              // Oscillator frequency.
oscillator.detune                 // Detune an oscillator

gain.gain                         // Set gain value (loudness)
delay.delayTime                   // Set the delay
buffer.playbackRate               // Speed of playbackRate
panner.pan                        // Left/Right Panning

....
							

Parameter Automation

		            var osc = context.createOscillator();
var gain = context.createGain();

// Connect oscillator to gain
osc.connect(gain.gain);

// Connect buffer to gain and gain to output
buffer.connect(gain);
gain.connect(context.destination);
		          

AM : Message : Carrier :

Connect Nodes to Parameters

                var carrier = context.createOscillator();
var message = context.createOscillator();

// Connect oscillator to frequency
message.connect(carrier.frequency);

// Connect carrier to gain and gain to output
carrier.connect(context.destination);
              

FM : Message : Carrier :

Why is everything so low level?


Libraries!

Tone.js

— Tone.js

SoundModels

— SoundModels

BabylonJS

— BabylonJS

Awesome WebAudio

Tools

Firefox WebAudio Inspector

Canopy

— Canopy

RecorderJS

— Recorderjs

Demos

Now go make some NOISE!

## Questions? _http://chinpen.net/talks_ ![](img/qrcode.png) @ntt
## Bonus Resources - Web Audio Book : http://chimera.labs.oreilly.com/books/1234000001552 - HTML5 Audio : http://www.html5audio.org - Web Audio in Nodejs?? https://github.com/sebpiq/node-web-audio-api - Web Audio Slack : https://web-audio-slackin.herokuapp.com/ - Web Audio Weekly Mailing List : http://blog.chrislowis.co.uk/waw.html