A browser music visualizer for acoustic instruments. For illustrating the transitions between pitch and vibrato and the difference between a sustained note and a breath attack.
The three v1 presets (Glacier · Tide · Aurora) responding to a sustained tone with 5.5 Hz vibrato and recurring breath attacks.
- Mic input or uploaded audio file (.wav and .mp3 supported)
- Real-time monophonic pitch tracking (pYIN, via pitchy)
- Vibrato detection for both kinds: frequency-modulated (strings, voice) and amplitude-modulated (winds, brass)
- Harmonic vs percussive split (Fitzgerald median-filter HPSS), so breath attacks read differently from sustained tone
- Three elemental visual presets: Glacier, Tide, Aurora
- Records the canvas and audio to WebM
ButterChurn descends from Milkdrop, the late-90s Winamp plugin. It looks great with EDM bass drops and synth pads. On a sustained recorder note or a violin tremolo it tends to fall flat, because it can't tell "vibrato at 5 Hz" apart from "loud part of the song."
Gliss is built for acoustic instruments: woodwind, brass, strings, voice. It knows what a held note is, what a vibrato is, what an attack of the note is. The visuals respond to that, not just to amplitude. Gliss is inspired by the word Glissando.
Vite + React for the shell. Three.js for rendering. Web Audio API for analysis. pitchy for pitch detection. No backend.
npm install
npm run dev
Open the URL Vite prints, allow mic, play.
Active development. v1 ships the three presets with mic input, file upload, and a WebM export (up to 90 s). Polyphonic tracking and an embeddable widget are on the roadmap, not in v1.
Glacier is original GLSL (a Voronoi ice-sheet shader). Tide and Aurora are forks of open-source shaders, each ported to a Three.js ShaderMaterial, recolored to the cold palette, and rewired to read from the AudioFrame integration contract. Sources below.
| Preset | Source | Author | License |
|---|---|---|---|
| Glacier | original | — | MIT (this repo) |
| Tide | WebGL Water (source) | Evan Wallace | MIT |
| Aurora | Auroras | nimitz | CC BY-NC-SA 3.0 |
Only Aurora is CC BY-NC-SA 3.0 (Shadertoy default). Gliss is non-commercial today; if commercial use is added later, that one preset needs replacement or relicensing.
MIT (Gliss code). Forked shader sources retain their original licenses listed above.