Here's what we're covering:
what is web audio?
p5.js/p5 sound
Tone.js
Build something together
Build your own thing
Share your thing
Web Audio Stuff I like:
web audio API - https://webaudio.github.io/web-audio-api/
super fucking complicated!
p5 sound! & Tone.js make is easier!
p5.js
Sign up for p5.js - https://alpha.editor.p5js.org/signup?source=http%3A
p5 - processing but for the internet
P5 reference - https://p5js.org/reference/
p5 Sound
p5 sound library (https://p5js.org/reference/#/libraries/p5.sound)
load sound file (https://p5js.org/reference/#/p5.SoundFile)
use mic input (with headphones!) (https://p5js.org/reference/#/p5.AudioIn)
Synthesis! (my favorite)
What is a synthesizer?
Oscillator + Envelope (for our purposes)
Oscillator - generates a sound wave (https://p5js.org/reference/#/p5.Oscillator)
Wave shape
Sine, square, triangle, sawtooth (four basic types)
Amplitude (http://alpha.editor.p5js.org/mhorwich/sketches/BkjV0vul7)
how tall is the wave
how loud/quiet does it sound
range of 0-1
Frequency (http://alpha.editor.p5js.org/mhorwich/sketches/BkjV0vul7)
how wide is the wave
how high/low does it sound (the note)
audible range is about 20-20k hz (cycles per second)
Frequency to MIDI (https://p5js.org/reference/#/p5/midiToFreq)
http://alpha.editor.p5js.org/mhorwich/sketches/Hy0rz_ulX
number system is kinda clunky -- Tone.js has a better system (more on that later)
Envelope - wraps oscillator into shape (https://p5js.org/reference/#/p5.Env)
Attack - how long it takes to reach full volume
Decay - how long it takes to reach “sustain” volume
Sustain - how loud the note is while it’s held
Release - how long it takes the note to fade all the way out
Effects
EQ/Filter
Compression
Delay
Reverb/Convolution
Sequencing
Phrase
Part (http://alpha.editor.p5js.org/mhorwich/sketches/HJcUyOugm)
Score
All kinda clunky; better sequencing options in Tone (which brings us to...)
Tone.js - https://tonejs.github.io/
Installation!
Since we're using the web editor, all you gotta do is add one line to the index.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.0.1/Tone.js"></script>
Now we can make stuff!
Examples - https://tonejs.github.io/examples/
Docs - https://tonejs.github.io/docs/
Instruments
mono/poly, am/fm, membrane, metallic, noise, pluck, sampler
Effects
delay, reverb, compression, eq, filters, 3d, SO MUCH MORE
Events (timing, etc)
loop, sequence, pattern, part
depends on what you're trying to do, syntax is slightly different for each
33null (a thing i made)
Controls
keyboard (automatic writing)
mouse (33null)
mic (join)
camera?
Let's put it all together!!