Code, Play and

Rock 'n' Roll

A WebAudio Experiment

Armagan Amcalar

GDG DevFest Berlin 2017
November 4th, 2017

Before we start...

dashersw

This is a pedalboard in real life

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?

www.w3.org/TR/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

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

Demo time!

thank you!

Let's keep in touch!

Armagan Amcalar
  dashersw

slides: tr.im/gdgb-rnr
demo: pedals.io