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