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

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

pedalboard.js

github.com/dashersw/pedalboard.js
 

(One of?) the first open-source WebAudio framework
for sound 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

Overdrive

Conv

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