Audio-reactive ASCII music visualizer for people who like terminal interfaces, old-school signal displays, and VJ-style browser toys.
Drop in a track, press play, and the page turns the audio energy into a glowing green ASCII waveform, spectrum analyzer, and retro control deck.
If you like projects that feel more like an instrument than a dashboard, give this repo a star. It helps me keep building small visual tools like this and makes it easier for other people to discover the project.
- Local audio playback with file picker and drag-and-drop support.
- Live Web Audio analysis through
AnalyserNode. - Audio-reactive ASCII waveform with separated vertical pulse peaks.
- Terminal-style UI with dashed panels, green signal graphics, amber controls, and a compact player deck.
- Energy, BPM-style display, progress control, volume control, and output spectrum.
- Vite + React + TypeScript. No backend required.
- Runs entirely in the browser. Your audio file stays local.
Live demo: https://ascii-music.vercel.app
npm install
npm run devOpen http://127.0.0.1:5173/, click [ OPEN AUDIO ], or drag an audio file onto the page.
npm run build
npm run previewnpm testThe tests lock down the core UI contract: terminal panel geometry, one-row visualization labels, the four-corner transport control, the idle progress state, and the ASCII peak renderer.
- React 19
- TypeScript
- Vite
- Web Audio API
- Canvas 2D
- lucide-react icons
src/
App.tsx # Player shell, controls, audio loading
AsciiVisualizer.tsx # Canvas renderer and audio-reactive ASCII field
styles.css # Terminal UI system
tests/
ui-contract.test.mjs # Layout and renderer contract checks
docs/
ascii-music-screenshot.png
- This is a browser visualizer, not a streaming app.
- Audio analysis starts after the user opens or drops a local audio file.
- The visual direction intentionally stays focused on one green terminal-style interface instead of multiple unrelated modes.
MIT