Case study 02 / Frontend / Sound
Sonora.
Sound, made visible.
4inputs5visualisers5bands5themes0frameworks
Scroll
Inputs / Feed it anything01
Four ways
to hit play.
Mode 01
Microphone
Live mic input with amplitude pickup
Mode 02
Audio file
Drag any mp3, wav, or flac
Mode 03
Synth pad
Play notes with A–K keys
Mode 04
Spotify
OAuth PKCE, client-side only
Visualisers / Five engines02
Same signal,
five shapes.
Live preview
Radial spectrum01 / 05
Frequency / Five bands03
Isolate anything.
Solo it. Mute it.
Sub Bass
20–80 Hz
Bass
80–300 Hz
Mids
300–2k Hz
Presence
2k–6k Hz
Highs
6k–16k Hz
Themes / Dress the signal04
Five moods.
One click away.
01
Aurora
02
Fire
03
Ocean
04
Neon
05
Mono
Signal path / Pipeline05
Sound in,
pixels out.
01
Input
Mic, file, synth, or Spotify
02
AudioContext
Web Audio API
03
AnalyserNode
FFT decomposition
04
BiquadFilter × 5
Band isolation
05
Canvas 2D
60fps render
Stack
Vanilla JS/Web Audio API/Canvas 2D/Spotify OAuth PKCE/Zero deps
