A browser-based real-time audio visualizer built with React and the Web Audio API. Load a track, hit play, and watch an animated equalizer, reactive particle bursts on bass hits, and time-synced lyrics drive a music-video-style scene on an HTML canvas — no server, no plugins, everything runs client-side.
Originally built to render lyric videos for music tracks before uploading them.
- Real-time frequency analysis via the Web Audio API
AnalyserNode(FFT). - Canvas equalizer that reacts to the live frequency spectrum.
- Particle system (
ParticleSystem.js) that emits bursts on detected bass beats. - Time-synced lyrics loaded from a simple JSON format, rendered over the scene.
- Built-in lyric sync mode — tap through lines while the track plays to record timestamps, then apply a global offset for fine-tuning.
- Custom background image/video support behind the visualizer.
npm install
npm run dev # start the Vite dev server
npm run build # production build into dist/
npm run preview # preview the production buildThen open the printed local URL in your browser.
This repository ships without audio or video assets. To run it with real content, add your own files (these paths are git-ignored by default):
public/audio/chaos-ma-plan.mp3— the track to visualize.public/background.png(or.mp4) — optional background behind the scene.public/lyrics/chaos-ma-plan.json— lyrics timeline (a placeholder sample is included).
{
"title": "Demo Track",
"artist": "Your Name",
"lyrics": [
{ "time": 1.0, "text": "First line", "type": "intro" },
{ "time": 4.0, "text": "Second line", "type": "verse" }
]
}time is the start of the line in seconds; type is a free-form tag
(intro / verse / chorus / outro) you can style differently.
The track path and lyrics path are defined in the TRACK constant at the top of
src/components/AudioVisualizer.jsx — change them to point at your own files.
MIT — see LICENSE.