WebGL audio visualizer

Sound, made visible.

Everything behind this text is being drawn right now, one frame at a time, from a handful of equations. Give it something to listen to and it starts answering.

Audio is decoded in this tab and never uploaded

←→ change presetC enter or leave cinemaSpace next scene in cinema

Three ways in

Give it something to listen to.

01

Feed it a track

Pick any audio file on this device. It is decoded in the tab and drives the waveform directly — nothing is uploaded.

02

Or open the room

Let the microphone listen instead. A voice, an instrument, or whatever is already playing nearby.

03

Then play in cinema

Cinema gives the visual the screen, shrinks the player to a puck, and turns on touch interactions.

The preset library

28 presets ship with the page. The other 284 are optional.

Every byte this page needs is served from this domain — the engine, the presets, the fonts. The one thing that is not loaded up front is the MilkDrop collection, because it is larger than the rest of the site put together and most visitors will never open the picker.

28 presets, no downloadBundled with the page in CSP-safe MilkDrop equations, so they are running before you finish reading this.
The full library284 more presets, and the 4 worlds below that need them. It is 2.1 MB, which is why it waits to be asked for.
Served from this domainThe engine, the presets, and the fonts are all hosted here. No CDN, no third party, and nothing to load before the page can paint.

Eight visual worlds

Each one is a different weather system.

Four of these run presets from the MilkDrop collection.

Your signal trail

0 / 8 found

The controls

Three decisions, then get out of your own way.

Nothing here needs setting up. Pick a source, pick a world, and the rest is one keypress at a time — or eight knobs at once, if you brought a controller.

  1. 01
    Give it a signal

    A file from this device, the microphone, or nothing at all — every preset animates on its own clock whether or not it can hear you.

  2. 02
    Choose a world

    Eight atmospheres, each one a different preset. Pick one, or press play and let it move on by itself every fifteen seconds.

  3. 03
    Take the controls

    Arrow keys step the presets, C enters Cinema, and eight knobs on a MIDI controller map themselves to the parameters underneath.

Live control over MIDIUnavailableThis browser does not implement Web MIDI, so there is nothing to connect to.

There is no way to ask a controller which knob is which, so the mapping is learned: the first eight knobs you move claim these eight rows in order, and the first four pads you press step the presets. It is remembered per device.

  • 1. Zoom--
  • 2. Rotation--
  • 3. Warp--
  • 4. Trails--
  • 5. Wave opacity--
  • 6. Wave scale--
  • 7. Brightness--
  • 8. Echo--
Touch and motionTouch

These drive the picture in Cinema, where the player is a bubble and the visual has the screen to itself. On the page nothing here takes a tap, so scrolling and every control keep working exactly as they do now. The same settings are one tap away inside the player.

Scene playback
Touch and motion

Press and hold arms a gesture; it does not change the scene immediately. Enter Cinema, then hold an open part of the picture for half a second. The scene reverses its colors only while you keep holding.

This device has no orientation sensors to read.

Recentre is the one worth knowing about: tilt measured against a phone lying flat is wrong for every real way of holding one, so hold it how you mean to hold it and press that.

Good to know

Questions, answered.

What it does with your audio, where the presets come from, and why one thing on this page is a download.

Does my audio get uploaded anywhere?

No. A file you choose is decoded by this tab and read straight into the visualizer, and the microphone is handled the same way. Nothing is sent to a server, because there is no server here — the whole page is static files.

What are these presets, exactly?

They are MilkDrop presets: a set of per-frame and per-pixel equations plus a pair of GLSL shaders, originally written for Winamp. Butterchurn compiles the equations to WebAssembly and draws the result in WebGL. 28 are on the page already — 19 written for it and 9 picked out of the community collection — and the other 284 arrive with the download.

Why is the full preset library a separate download?

The collection is 2.1 MB, more than everything else on this page combined. Loading it up front would make the page slower for every visitor in order to serve the few who want all 312 presets, so it waits until it is asked for.

What do I need for the MIDI knobs?

Any class-compliant USB controller and a browser that implements Web MIDI, which today means Chrome, Edge, or Opera. The mapping is learned from whatever you move first and remembered per device, so there is nothing to configure.

Why is nothing moving?

Either the browser has no WebGL 2, or this device asks for reduced motion — in which case the visuals wait for a deliberate click rather than starting on their own. The hero says which one applies.

Start a conversation

Tell us what needs to move.

Use the form for a project note, a question, or the first rough version of an idea. We'll reply by email.

By sending this form, you agree that we may use your details to reply to this message. See the privacy policy for how it is stored.

Nothing left to read

Turn the lights down and make it big.

The page has said everything it needs to. Fill the screen, put something loud on, and leave it running.

Back to the controls

Nothing rated yet. The thumbs beside every scene are how this fills up.

Ratings stay in this browser. The file is how they reach another device — or us, if you want the ones you liked to ship with the page.