Web Audio API
#CodePenOrebro
Johan Karlsson @ Enfo
whois localhost
Textboxes Over Data
What is sound?
- "Oscillation in pressure, stress, particle displacement, particle velocity, etc., propagated in a medium with internal forces (e.g., elastic or viscous), or the superposition of such propagated oscillation."
- Wave of pressure
What does sound look like?
- Amplitude
- Frequency
Bass Drum
What is Web Audio API?
- Inside your browser!
- Powerful and flexible
- Audio Nodes that you instantiate and connect
Browser Support
Oscillator Node
- Frequency
- Type (waveform)
- Start/Stop
Live Coding
Make some noise! 〰️->🔊
Waveform Character
Also see this super cute waveform demo.
Stomper - bass🥁
Bass Drum
Stomper Tribute
Drum Machine
Chaining Nodes
Image from Web Audio tab in Firefox DevTools
LFO - Live Coding
Synth with LFOs 🎹🎛️
A real sw synth
Audiotool is an in-browser "studio", much like Propellerheads Reason. One of the synths is the Pulverisateur.
Swag Time!
AudioBufferSource Node
- In-memory audio data
- Basically an audio file
Playing a sound file
Scheduling Change
Phaser effect
https://en.wikipedia.org/wiki/Phaser_(effect)
A short, unprocessed string sample, followed by a few different phasing effects on the same sample
Phaser effect on drums
Analyser Node
- Get info about the sound
- Frequency domain or
- Time domain
- Can be used to draw visualizations on canvas
MediaStreamSource and Analyser Node 🎤 -> 🎨
Go Create Some Pens!
- There's a collection of the Pens from this presentation, look and fork and experiment!
- Mozilla Docs
- Get inspired by Google Music Labs
deck
By Johan Karlsson
