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:

Patatap

Sampulator

Novation Launchpad

Google Chrome Music Lab

Other stuff!

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.jshttps://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!!