Code, Play and
Rock 'n' Roll
A WebAudio Experiment
Armagan Amcalar
JSConf Iceland
March 2nd, 2018
Before we start...
dashersw
This is a pedalboard in real life
2013 Pedalboard by Royd Andalis licensed under CC BY 2.0
dashersw
This is how it looks in software
pure CSS magic.
dashersw
Who am I?
Armagan Amcalar
Head of Software Engineering @ unu GmbH
Founder @ Lonca Works
dashersw dashersw
AUTHORED ON GITHUB
What is WebAudio?
A standard browser API that enables advanced audio applications within the browsers
3D sound processing in games
Sound production applications
Voice training
Art installations
and anything you can imagine about audio
dashersw
WebAudio API basics
dashersw
source
channel splitter
delay
biquad
filter
gain
gain
channel merger
target
a network of nodes
WebAudio components
dashersw
AudioContext
OfflineAudioContext
GainNode
DelayNode
AudioBufferSourceNode
MediaElementAudioSourceNode
PannerNode
ConvolverNode
AnalyserNode
ChannelSplitterNode
ChannelMergerNode
BiquadFilterNode
DynamicsCompressorNode
WaveShaperNode
OscillatorNode
AudioWorkerNode
const context = new AudioContext();
const gain = context.createGain();
gain.connect(context.destination);
const request = new XMLHttpRequest();
request.open('GET', 'some_sound.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(gain);
}, onError);
}
request.send();Small example
pedalboard.js
github.com/dashersw/pedalboard.js
The first open-source WebAudio framework for guitar effects
GPL Licensed
Well-documented
Abstractions based on the guitar world:
pedals, pots, switches, LEDs
Built on top of Google Closure Library
Compiles with Google Closure Compiler in Advanced Mode
Uses MVVM architecture
dashersw
pedalboard.js components
Stage
Board
Box
Footswitch
Led
Pot
FileInput
StreamInput
dashersw
Reverb
Delay
Overdrive
Conv (convolver)
Cabinet
Volume
Stage
The bed for everything, where we live, where we breathe
Board
The container for a bunch of guitar pedals
Box
Parent class of all pedals, has one toggle footswitch, a status LED and a potentiometer for volume
dashersw
Input
An abstract class that is a source of sound. FileInput and StreamInput extend Input
FileInput
Lets you use any recorded audio as a source file in various formats as supported by the browser (MP3, WAV, OGG etc.)
StreamInput
Lets you use any recording equipment (mics, guitars, mixers) as a source so you can replicate GarageBand
dashersw
Pot
Parent class for all potentiometers
LinearPot
A B type linear potentiometer for adjusting pedal parameters (manages AudioParam)
LogPot
An A type logarithmic potentiometer for controls like volume and overdrive, which are typically logarithmic.
dashersw
Footswitch
Toggles the pedals or on off with a true bypass mechanism — works like a 3PDT switch.
Led
Works alone or coupled with a Footswitch, shows the status of the pedal or anything you like (i.e., tempo)
dashersw
Web MIDI API
The API we've been waiting for!
MIDI: Musical Instrument Digital Interface
Connect DJ and musician gear to your computer and control the environment!
Video applications
Photo editing tools
Games and interactive applications
Web MIDI API
const input, out;
navigator.requestMIDIAccess().then(onMIDIInit);
function onMIDIInit(midi) {
const inputs = midi.inputs.values();
const outputs = midi.outputs.values();
for (let input = inputs.next(); input && !input.done; input = inputs.next()) {
input.value.onmidimessage = MIDIMessageEventHandler;
haveAtLeastOneDevice = true;
}
for (let output = outputs.next(); output && !output.done; output = outputs.next()) {
out = output;
}
}
function MIDIMessageEventHandler(event) {
console.log(event.data) // [176, 12, 127]
}
Demo time!
thank you!
Let's keep in touch!
Armagan Amcalar
dashersw
slides: https://slides.com/armaganamcalar/jsconfis
demo: pedals.io