~/music-visualizer 🎵 mp3 📻 winamp 🎹 piano 🥁 drums ☕ Support me apps ← about me

Music Visualizer_

Live, GPU-rendered visuals for your music — mic, a browser tab or your own files. Sixteen scenes, Auto-DJ on the drop, fullscreen or picture-in-picture.
music visualizer
What should it listen to?
Nothing is uploaded — it all runs in your browser.
— BPM● REC
Drop audio files to play them
Keyboard shortcuts
1–9 · ⇧1–7Pick a scene ← →Previous / next scene AAuto-DJ on / off CNext colours FFullscreen PPicture-in-picture SpacePlay / pause NNext track D · T · O · MDemo · tab · open files · mic RRecord clip SSnapshot HHide on-screen info ?This help EscClose / exit fullscreen
Your browser could not start WebGL, which this visualizer needs.
Try an up-to-date Chrome, Edge, Firefox or Safari, and check that hardware acceleration is on.

A light show for whatever you're listening to

This music visualizer turns sound into motion in real time. Point it at a browser tab playing Spotify or YouTube, drop in your own music files, use your microphone, or just press play on the built-in demo beat. Every scene is a shader running on your graphics card, so it stays smooth even fullscreen on a 4K screen.

Leave Auto-DJ on and it runs the show for you: it listens for the drop after a quiet build-up and cuts to a new scene right on it, detects the tempo, and punches the camera on every kick. Pop it out with picture-in-picture to keep it floating over your work, or record a clip — with sound — to share.

🔒 Nothing leaves your device. Audio is analysed with the Web Audio API and drawn with WebGL, entirely in your browser.

How to use it

  1. Pick a sound. Demo plays instantly. For Spotify or YouTube choose Tab, select the tab and keep “Also share tab audio” on.
  2. Pick a scene with the buttons or keys 1–9 (Shift+1–7 for scenes 10–16), or leave Auto-DJ on and let the music decide.
  3. Go big. Press F for fullscreen on a second screen, or P to pop it out into a floating window.

Sixteen scenes

🌀 TunnelA neon tunnel that races forward on the bass, lit by the spectrum.
🌌 NebulaSwirling gas clouds and twinkling stars that swell with the music.
⭕ HaloA circular spectrum with a live waveform ring and a pulsing core.
🌅 HorizonSynthwave sun over a racing grid; the mountains are your spectrum.
🌊 LiquidWaveform ribbons fed back into themselves — Milkdrop-style.
⛰️ TerrainFly over a 3D landscape built from the last few seconds of sound.
📊 BarsA clean spectrum analyser with glowing peaks and a reflection.
🚀 WarpWarp-speed starfield that accelerates on every kick.
🔮 KaleidoAn eight-fold kaleidoscope of flowing, beat-driven patterns.
🔴 OrbA glowing sphere with a spectrum corona and an orbiting ring.
〰️ ScopeAn XY oscilloscope tracing Lissajous shapes from your waveform.
🟩 LEDA dot-matrix LED wall scrolling the spectrum like a waterfall.
💠 RippleA circular spectrogram — every sound ripples out from the centre.
🧪 PlasmaOld-school demoscene plasma, stirred by the bass.
🎇 LasersConcert laser beams, one per frequency band, sweeping through haze.
🧫 CellsLiving Voronoi cells, each lighting up to its own band.

Keyboard shortcuts

1–9 · ⇧1–7Pick a scene ← / →Previous / next scene AAuto-DJ on / off CNext colour palette FFullscreen PPicture-in-picture SpacePlay / pause NNext track D / T / O / MDemo / tab / open files / mic RStart / stop recording SSave a PNG snapshot HHide the on-screen info ?Show shortcuts on screen EscExit fullscreen

Tips

Flat or twitchy? The level adjusts itself, but Reactivity sets how hard the music drives the picture — lower it for calm ambience, raise it for a club look. Trails controls how long motion lingers (Liquid and Warp love high trails), and Glow sets the bloom. For a stream, capture the window in OBS and press H to hide the on-screen info. On Windows, sharing your entire screen with system audio visualizes any app, not just a browser tab.

Related searches

music visualizeraudio visualizer onlinespotify visualizeryoutube visualizermilkdrop in browserwebgl visualizerbpm detectorsynthwave visualizerstream overlayfullscreen visuals
Frequently asked questions

FAQ — Music Visualizer

What does the music visualizer react to?

Four sources: the built-in demo beat, your microphone, the audio of a browser tab or your screen, or music files from your device. Pick one on the start screen or in the Sound section and every scene moves with it in real time.

How do I visualize Spotify, YouTube or another tab?

Choose Tab audio. Your browser asks what to share: pick the tab that is playing music and make sure 'Also share tab audio' is switched on. On Windows you can share the entire screen with system audio to visualize any app. Tab capture works in Chrome and Edge on desktop.

What is Auto-DJ?

Auto-DJ changes the scene for you. It watches the energy of the music and cuts to a new scene when a drop hits after a quieter passage, and otherwise moves on every 32 beats so the show never goes stale. Every other change also rotates the colour palette. Transitions are a dissolve rather than a hard cut.

How does the BPM detection work?

The visualizer detects kicks from sudden jumps in bass energy, measures the time between them and votes on the most likely tempo, folded into the 85 to 170 BPM range where most dance and pop music sits. The value appears in the corner once enough beats agree, usually within a few seconds.

Can I keep it playing in a small window while I work?

Yes. Press Picture-in-picture (or P) and the visualizer pops out into a floating window that stays on top of your other apps and keeps animating when you switch tabs. It works in Chrome, Edge and Safari.

Can I record a video of the visualizer?

Yes. Press Record clip (or R) to capture the visualizer as a video, including the sound of the demo beat, your files or the shared tab. Press it again to stop and download the file. Chrome, Edge and Firefox save WebM; Safari saves MP4.

Why does it need WebGL?

Every scene is a shader that runs on your graphics card, which is what makes effects like the nebula, the music terrain and the bloom glow possible at a smooth frame rate. WebGL is available in every modern browser. If a frame starts taking too long, the render resolution is lowered automatically and raised again once there is headroom.

Is my audio uploaded anywhere?

No. Audio is analysed locally with the Web Audio API and drawn locally with WebGL. Microphone input, tab audio and your files never leave your device, and there is no account.

Why do the visuals look the same whether the music is loud or quiet?

That is the automatic level control. It keeps track of the recent peak level and scales the analysis to it, so a quiet microphone and a loud tab both fill the screen. The Reactivity slider sets how hard it drives the visuals on top of that.

Can I use it as a stream overlay or on a second screen?

Yes. Go fullscreen on a second monitor, or capture the browser window in OBS. The on-screen info fades away after a few seconds of no mouse movement, and the screen is kept awake while the visualizer runs fullscreen.

Which audio files can I load?

Anything your browser can play, which in practice means MP3, M4A/AAC, WAV, OGG and FLAC in most browsers. Drop several files at once to build a playlist. They play in order, loop at the end, and respond to your keyboard's media keys.

Is it free?

Completely free, with no account, no ads and no watermark. It is one of the free browser tools at jasperbernaers.com.

▸ More fullscreen screens