Ready?

Ladies & gentlemen...

Sound Synthesis with Web Audio

Agenda

History of computer sound & music
Web Audio API
Full Web Audio Synth demo

Commodore 64

Commodore Amiga

PC - software mixing

VST Plugins

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

Web Audio API

AudioContext

↓ Creates

AudioNode

↓_* Has

AudioParam

Audio routing graph

Sources

→

Effects

→

Destination

Example

Oscillator 1

↘

Oscillator 2

↗

Filter

→

Destination

Audio Nodes

Audio Sources

OscillatorNode

AudioBuffer
SourceNode

MediaStream
AudioSourceNode

Effects

BiquadFilterNode

GainNode

DelayNode

StereoPannerNode

ConvolverNode

Etc...

Live coding!


// Create Audio Context and OscillatorNode, and connect them
var ac = new AudioContext();
var osc = ac.createOscillator();
osc.connect(ac.destination);
// Set the oscillator parameters
osc.frequency.value = 150;
osc.type = "sawtooth";
// Play a sound for 2 seconds
osc.start();
osc.stop(ac.currentTime + 2);

Live Demo

Repo at https://github.com/lcrespom/Modulator

Logo Design by Marta Quer Bach

SynthLib


var ac = new AudioContext();
var json = { /* Instrument JSON... */ };
var instrument = new Modulator.Instrument(ac, json, 8);

var ct = -1, lastNote = 0;
var KB_NOTES = 'ZSXDCVGBHNJMQ2W3ER5T6Y7UI9O0P';
var score = 'Y  WRTYTWO I Y  WRTYTWO I T  QERTRQO I T  QERTRQO P ';
var notes = score.split('').map(function(k) {
    return k != ' ' ? 36 + KB_NOTES.indexOf(k) : 0;
});

function tick() {
    if (lastNote) instrument.noteOff(lastNote);
    if (ct++ > score.length * 2) return;
    var note = notes[ct % notes.length];
    if (note > 0) instrument.noteOn(note);
    lastNote = note;
    setTimeout(tick, 180);
}

tick();

Thank you

@lcrespom

https://lcrespom.github.io

Contributions are welcome