How I Built a Free Music Visualizer That Runs in Your Browser

Most music visualizer tools I found online had the same problem: they either put a watermark over your video, asked for a paid plan after one export, or made you upload your song to a server and wait in a queue. I wanted something simpler: drop in a track, pick a look, and get a video file back, with nothing leaving my own computer. That became the first tool on ToolMint. This post explains how it works and what went wrong along the way.

The idea: let the browser do all the work

Modern browsers are surprisingly capable. They can decode audio, analyse it in real time, draw graphics at 60 frames per second, and even record what they draw into a video file. Put those together and you don't need a server at all. That has three practical benefits: nothing is uploaded, so your unreleased music stays private; there is no queue; and hosting costs almost nothing, which is why the tool can stay free.

Step 1: reading the music with the Web Audio API

The visualizer is driven by the Web Audio API. The song is loaded into an audio element, connected to an AnalyserNode, and on every animation frame I ask the analyser for the current frequency data. That gives an array of numbers, one per frequency band, from bass on the left to treble on the right. A loud kick drum shows up as large values in the first few bands. Every visual style, whether bars, ripples, snow or hearts, is just a different way of turning that array into shapes.

Step 2: drawing it on a canvas

Each frame, the page clears an HTML canvas and redraws the scene: the background image, the visualizer shapes, your logo, and the optional floating particles. Making seven styles feel different was mostly about small choices. Bars need smoothing so they don't flicker. Ripples need to react to bass rather than the whole spectrum. Particles needed their own motion so they don't just copy the bars. I also added a position option (top, bottom, left, right, centre) because a centred visualizer often covers the part of a background photo you care about.

Step 3: recording the result as a video

This was the part I assumed would be hard, and it turned out to be the most elegant. A canvas can produce a live video stream with captureStream(), and the browser's MediaRecorder can record that stream together with the audio into a WebM file. I use VP9 video and Opus audio at a bitrate of up to 10 Mbps for the highest quality setting. The trade-off is that recording happens in real time: a four minute song takes four minutes to export. That is the price of doing everything locally, and I think it is a fair one for a free tool.

Vertical video, because that's where creators are

Early on, the tool only produced 16:9 video for YouTube. But many people who make music clips post them on TikTok, Instagram Reels or YouTube Shorts, so I added 9:16 and 1:1 aspect ratios. Changing the canvas size is easy; the hard part is that every element (logo, particles, visualizer position) has to scale sensibly in each format, or it looks cropped and awkward.

The bugs that taught me the most

• Downloads that silently failed. The export worked while I was testing in one environment and did nothing on the live site. The fix was to add a fallback download method and, more importantly, to show a visible status message whenever something fails, instead of failing silently.
• A library version that didn't exist. A QR code library I pinned to a version number that was never published simply refused to load. Lesson learned: always check that the exact version exists before you ship.
• Emoji particles ignoring my colour settings. Emoji are drawn with their own colours, so the theme colour had no effect. I replaced them with shapes drawn in code so they follow the colour you choose.

Most of the real work on a project like this isn't the clever idea. It is catching the dull failures that only appear for real users.

What's next

I want to add safe-zone guides so titles don't get hidden behind the buttons on TikTok and Reels, a track-title overlay, and faster export. If you have a feature request, the contact page is the best way to reach me. I read everything.