Play a Music Visualizer With Your Computer Keyboard

Most visualizers wait for you to give them a song. This one will take a performance instead — from the keyboard already in front of you.

Published 2026-09-10 · Free play · Keyboard · Synth

Press K in BLOOB and the letters under your fingers stop being shortcuts and start being notes. There is no plugin, no MIDI cable and no account; the browser makes the sound, the same analyser that reads a song reads the synth, and the visuals move because something audible actually happened.

The key map you already know

It is the layout GarageBand and Ableton use, so if you have ever poked at a DAW without a controller, your hands already know it. A is C and the white keys walk up from there to L. The black keys sit above them where they sit on a piano: W is C sharp, E is D sharp, then a gap, then T, Y and U for F sharp, G sharp and A sharp. Z and X move the octave three steps in each direction, which is enough to get from a bass line to a bell part without touching the mouse.

Holding several keys gives you chords — up to fourteen voices at once, after which the oldest note is stolen so a stuck chord never chokes the synth. Space is a sustain pedal while free play is on. Esc exits and hands the letters back to the app.

Five instruments, not five presets

Keys, Pluck, Bass, Pad and Bell are small two-oscillator synths with their own filter and envelope, and a compressor on the master bus so a fistful of notes stays at a sane level. The difference between them is the difference between instruments, not skins: a Pad blooms over most of a second, a Pluck is gone before you lift your finger, Bass is deliberately dark so it drives the low end of a scene, Bell has a long, thin tail that shows beautifully on an oscilloscope.

The number row is a drum kit: 1 to 7 give you kick, snare, hat, clap, tom, open hat and rim. They are synthesized, they run through the same output, and — this matters — they trigger the same onset detection that a real drum in a song triggers. Tap a kick and the scene lurches the way it does on an 808.

How to play it, from a cold start

1. Open BLOOB and press K, or click Play the keys on the intro screen.
2. Play A through L. If nothing sounds, click once on the page first — browsers require a gesture before they will start audio.
3. Pick an instrument from the strip: Keys to start, Bass if you want the picture to move hard.
4. Change the visual with ← and → while you play. Arrows keep working during free play; letters do not, because they are notes now.
5. Tap 1–7 for drums under what you are playing, and hold Space to sustain a chord while you do it.
6. Press Record when something works, and stop when it stops working. The export is an MP4 or WebM with your playing in it and nothing on the frame.

Why the visuals are honest

A visualizer could cheat here. It knows which key you pressed, so it could draw a flash on every keystroke and call it reactive. This one does not: the synth is wired into the same analyser node as a loaded song, so the picture is built from the audio, not from the key event. A note you play quietly moves less. A held pad slowly fills the spectrum as its filter opens. A note that decays takes the visual down with it. If you mute your output, the picture stops.

That is also why free play works over a track. Load a song, press K, and you are jamming: the analyser hears the sum, and the scene responds to the combination rather than to two separate things fighting.

A phone or tablet works too

The on-screen keyboard mirrors what you play and takes taps directly, so a tablet becomes a small instrument with no hardware at all. It is not expressive — a touch has no velocity — but it is enough to show someone what an octave looks like, or to let a child hammer out a drum pattern and watch the room light up.

When you outgrow the letters

The computer keyboard has one real limit: every note arrives at the same velocity, because a key is either down or up. If you want dynamics, plug in a controller — velocity, the sustain pedal, pitch bend and the mod wheel all come through in Chrome and Edge, and the rest of the instrument is identical. That is the subject of a separate post on what Web MIDI can and cannot do.

And if you would rather point at what is happening than explain it, the same free play makes a good teaching instrument: play a note, then the octave above, then both, and watch the harmonics stack up.