Questions

A real-time audio visualizer. It reads an audio signal, runs a frequency analysis on it sixty times a second, and drives a 3D scene with the result — bar heights, camera movement, colour and bloom all come from what the music is actually doing.

There are five scenes. Spectrum City is a scrolling 3D spectrogram you fly over. Hyperspace is a tunnel of rings, each one holding the spectrum from the instant it spawned. Nebula Orb is a sphere deformed by noise and the live spectrum. Particle Galaxy is 90,000 points in spiral arms. Waveform Terrain renders the spectrogram as a landscape.

Drag an audio file anywhere onto the page — mp3, flac, wav, ogg, m4a. It starts immediately and you get a scrub bar. Or press File in the control bar to pick one.

The file is never uploaded. It is decoded by your browser and stays on your machine.

Yes, via System — but the browser's sharing dialog is the fiddly part, so here is exactly what to do:

1. Press System. A sharing dialog opens.
2. Choose the Chrome Tab tab at the top of that dialog.
3. Select the tab that is playing audio.
4. Switch on Also share tab audio — it is the toggle in the bottom-left corner. This is the step everyone misses.

If you pick Entire Screen instead, look for Share system audio. That option exists on Windows but not on macOS, which is why sharing a tab is the reliable route.

A desktop app is playing, not a browser tab? Route it through a browser tab, or use the microphone and let your speakers do the work.

No. There is no server. The whole thing is static files plus your browser's own audio and graphics APIs. Files you drop are read locally, captured audio is analysed locally, and nothing is recorded or transmitted.

The only thing stored is your settings — scene, palette, sliders — in your browser's localStorage. Clearing site data resets it.

Scroll / pinch

Zoom the camera in and out

0

Reset zoom

Space

Play / pause

← →

Previous / next scene

T

Next palette

F

Fullscreen

H

Hide the interface

C

Auto-cycle scenes every 45 seconds

The control bar fades out on its own once you stop moving the mouse. Move it again to bring it back.

Open Settings in the control bar. Sensitivity scales how hard the audio drives everything — turn it down for loud, heavily compressed tracks and up for quiet ones. Bloom controls the glow, Saturation the colour intensity, and Camera motion calms the whole thing down if it is too much.

Hue drift is the fun one: above zero it rotates the entire palette continuously and shoves it further on every beat.

Tick Reduce quality in Settings — it caps the render resolution at 1× instead of following your display's pixel ratio, which is the single biggest cost on high-DPI screens. Turning Bloom down helps too.

Enable Show FPS to see what you are actually getting. If it is far below 60, check that hardware acceleration is on in your browser's settings.

Anything current: Chrome, Edge, Firefox, Safari, and their mobile versions. It needs WebGL 2 and the Web Audio API; if either is missing you get a plain message instead of a black screen.

Tab-audio capture is the exception — that is a Chromium feature, so Chrome and Edge only.

Plain JavaScript modules and three.js, with no build step and no framework. Rendering runs through a post-processing chain — bloom, then a single composite shader doing chromatic aberration, vignette, grain and colour grading. The spectrum is uploaded to the GPU as a rolling texture so the shaders can read the last two seconds of audio without any per-frame work on the CPU.

three.js is bundled with the site rather than loaded from a CDN, so it keeps working offline and cannot break when someone else's server does.

Not a recording — it is generated live from oscillators and filtered noise every time you load the page: kick, snare, hats, bassline, arp and pad at 118 BPM. That keeps the download small and sidesteps music licensing entirely.