Music visualizer: MilkDrop for any song.

At a glance

How to use it

Drop a song on the box and it starts playing with a preset picked at random. The preset's name, which carries the names of the people who wrote it, is shown under the picture. "Another preset" blends to a new one over two seconds; the list lets you go straight to one you know; and "Change it" sets how often it moves on by itself. Full screen fills the display, and Esc comes back. The ordinary player bar above the picture seeks and pauses the song.

The microphone button is for sound that is not a file: vinyl on the deck, a band rehearsing, whatever the speakers in the room are playing. The page asks the browser for the raw microphone with echo cancellation, noise suppression and automatic gain turned off, because all three are built for speech and flatten music. The microphone is drawn but never played back or recorded, so it cannot feed back.

Making a video for a song

"Record a video" rewinds the song, plays it through, and records exactly what is on the canvas together with the song's audio. It stops and saves when the song ends, or when you press the button again. Pick the picture size first: 16:9 for YouTube, square or vertical for a feed. The recording is made by the browser's own MediaRecorder, at 30 frames a second and about 8 Mbps of video with 256 kbps audio, as an MP4 (H.264 and AAC) in browsers that can write one and as a WebM otherwise.

It records in real time, so a four-minute song takes four minutes, and the tab has to stay in front: browsers stop drawing a hidden tab, and the video would freeze while the music carried on. You can change presets by hand while it records, and those changes are in the video. If you only need a still picture with a waveform behind a song, MP3 to MP4 makes that in seconds instead; and if you need a WebM turned into something else, or the sound replaced afterwards, add audio to video does that without re-encoding the picture.

What MilkDrop is

MilkDrop is the visualiser Ryan Geiss wrote for the Winamp player in 2001. A preset is not a video: it is a small program. A few dozen equations run once per frame and once per point of a warping mesh, moving, zooming and rotating the previous frame's picture, so that everything drawn leaves trails that swirl; on top go waveforms and shapes, and in MilkDrop 2, pixel shaders. The equations read three numbers from the music, the current level of the bass, the middle and the treble against their recent averages, which is why a kick drum makes a good preset lurch. Because each frame is built from the last, no two runs of a song look the same.

Butterchurn is an independent implementation of that system for the browser: it translates the presets' equations to JavaScript and their shaders to WebGL 2, and runs them on your graphics card. It is the same engine that draws the MilkDrop window in Webamp, the rebuilt Winamp player on this site, and it is listed on Recomp, a catalogue of software reimplementations. Neither it nor this page is affiliated with Winamp or its owners.

Limits

The picture is drawn at the size you choose and scaled to fit the page, so 1920×1080 costs more graphics power than 1280×720; on an older laptop, the smaller size keeps the frame rate up. Some presets with heavy shaders run slowly on integrated graphics: move to another. The file plays through the browser's audio element, so it has to be a format the browser plays; convert anything else first. And the PNG is the frame as drawn, at the canvas size, not a screenshot of the scaled picture.