~/music-visualizer 🎵 mp3 📻 winamp ✂️ editor 🎮 8bit 🖐️ hands apps ← about me

Music Visualizer_

Reacts to your mic, a tab's audio or a file — fullscreen, in your browser. Great on a second screen.
⛶ click to fullscreen
Keyboard Shortcuts
FToggle fullscreen MMicrophone TTab / system audio SpacePlay / pause file 1–8Switch mode SSave PNG snapshot VStart / stop recording LCopy share link XCinematic FX on / off RReset defaults ?Toggle this overlay EscExit fullscreen

What is this?

A music visualizer that turns sound into live motion. Point it at your microphone, the audio from a browser tab (YouTube, Spotify, a stream), or a music file you load, and watch spectrum bars, a waveform, a radial burst or a filled spectrum line dance with the beat. Built to sit fullscreen on a second monitor while you work — or to capture in OBS as a stream visual.
🔒 100% private — audio is analysed locally with the Web Audio API. Nothing is uploaded. Tab audio needs Chrome or Edge on desktop.

Modes

📊 BarsClassic frequency spectrum rising from the floor.
🪞 MirrorBars growing out from the centre, top and bottom.
〰️ WaveformAn oscilloscope tracing the raw sound wave.
🌀 RadialA circular spectrum bursting from the middle.
📈 LineA filled spectrum curve, like a glowing skyline.
✨ ParticlesA field of glowing particles that surges and bursts on every beat.
🔮 KaleidoscopeThe spectrum mirrored into a rotating, symmetric pattern.
⣿ Dot MatrixA retro LED-wall equalizer built from lit-up dots.

Cinematic FX

Every mode is rendered off-screen and then put through a post-processing chain, the same way a game engine finishes a frame. Bloom makes bright parts glow and bleed light, with an anamorphic streak that smears highlights sideways like a wide lens. Echo trails feed the previous frame back in, slightly zoomed, so movement leaves a ghost behind it. Beat impact drives everything that fires on a kick: a punch-zoom, a camera shake, and a split-second chromatic aberration that pulls the red and blue channels apart. Vignette and film grain finish it off. Turn the whole chain on and off with X, or dial each slider to taste — and if your machine starts struggling, the quality steps itself down automatically to hold the frame rate.

Tips

For a tab like YouTube or Spotify, choose “Tab / system audio”, pick the playing tab and tick Share tab audio. Tune sensitivity if the bars clip or stay flat, smoothing for a calmer or punchier feel, and punch for how hard bars snap to a kick. Try particles or kaleidoscope fullscreen with beat flash on — they make the best ambient backdrop. For the most cinematic look, push bloom to Heavy, keep echo trails around Soft so it doesn't smear, and leave beat impact at Medium; if the picture ever feels too soft or too busy, press X to see the raw mode underneath.

Keyboard shortcuts

FToggle fullscreen MUse microphone TUse tab / system audio SpacePlay / pause loaded file 1–8Switch mode SSave PNG snapshot VStart / stop recording a clip LCopy share link XCinematic FX on / off RReset defaults ?Toggle this shortcut list on-screen EscExit fullscreen

Related searches

music visualizer audio spectrum spectrum analyzer waveform visualizer mic visualizer tab audio visualizer stream overlay fullscreen visualizer web audio sound reactive
▸ Frequently Asked Questions

FAQ — Music Visualizer

What does the music visualizer react to?

Three sources: your microphone, the audio from a browser tab or your screen, or a music file you load from your device. Pick a source and the bars, waveform or radial display move in real time with the sound.

How do I visualize audio from a tab like YouTube or Spotify?

Choose Tab / system audio. Your browser asks which tab or screen to share — pick the one playing music and tick Share tab audio. The visualizer then reacts to that audio. This works best in Chrome and Edge on desktop.

Is my audio uploaded anywhere?

No. Everything runs locally in your browser using the Web Audio API. Microphone, tab audio and any file you load are analysed on your device and never leave it.

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

Yes. Press Enter Fullscreen or click the canvas and it fills the display, so you can leave it running on a second monitor while you work, or capture it in OBS as a visual for a stream.

Why does it move before I pick a source?

Before you connect audio it runs a built-in demo animation so you can preview the styles. As soon as you choose microphone, tab audio or a file, it switches to your real sound.

Is it free?

Yes, completely free. No account, no ads, no watermark. It's one of the free browser-based tools at jasperbernaers.com.

Can it react to the beat automatically?

Yes. It watches the low-frequency energy in real time and detects kicks and bass hits, triggering a brief punch flash. Toggle Beat flash in the Overlay section, and use the Punch slider to make bars snap harder or stay smoother on transients.

What are the Cinematic FX, and can I turn them off?

They're a post-processing pass over whichever mode you're in: bloom (glow and light bleed, with an anamorphic streak), echo trails (the previous frame fed back slightly zoomed, so motion leaves a ghost), and beat impact — a punch-zoom, camera shake and a brief chromatic aberration that splits the red and blue channels on every kick — plus a vignette and film grain. Each has its own slider or toggle in the sidebar, and X switches the whole chain off if you want the clean, raw mode.

Will the effects slow my machine down?

They're all done with plain 2D canvas compositing — no WebGL, no libraries — and the heavy parts run on a reduced-resolution buffer. The visualizer also watches its own frame time: if frames start taking too long it quietly drops the bloom buffer resolution and skips the chromatic aberration, then restores them once things speed back up. If you'd rather control it yourself, pull bloom and echo trails down, or press X.

Can I save or share what I made?

Yes — three ways. Save Snapshot downloads a PNG of the current frame, Record Clip saves a short WebM video (Chrome, Edge, Firefox), and Copy Share Link copies a URL that reopens the visualizer with your exact mode, theme and settings already applied.

▸ More fullscreen screens
🌍 World Clock Wall 🕐 Analog Clock 🟢 Matrix Rain ✦ Starfield 🌋 Lava Lamp 🐠 Aquarium 🔥 Fireplace 🎵 MP3 Player 🎹 Virtual Piano → all tools