Circular Ring Audio Visualizer

A browser-based audio visualizer that plays MP3 and MP4 files and renders a circular FFT spectrum ring synced to playback. Bars radiate outward from a center ring with a green-to-yellow gradient and peak-hold caps, inspired by classic equalizer-style visualizations.

Features

• File playback — Load local MP3, WAV, OGG, MP4, WebM, and M4A files
• Circular spectrum — 96 radial bars mapped from frequency data, bass at 12 o'clock, clockwise
• Peak hold — Arc caps above each bar that linger and decay after loud hits
• Playback controls — Play/pause, seek slider, elapsed time
• Drag and drop — Drop a file onto the overlay or use the file picker
• Responsive — Fullscreen canvas that scales with the window and HiDPI displays

Tech Stack

• Vite + TypeScript
• HTML5 Canvas 2D for rendering
• Web Audio API (AnalyserNode) for real-time frequency analysis

Getting Started

Prerequisites

• Node.js 18+ and npm

Install

npm install

Development

npm run dev

Open the URL shown in the terminal (typically http://localhost:5173).

Production build

npm run build
npm run preview

The static site is output to dist/ and can be deployed to any static host.

Usage

1. Open the app in your browser.
2. Click the overlay or drag an audio/video file onto the page.
3. Playback starts automatically; the ring animates in sync with the audio.
4. Use the bottom controls to pause, seek, or open another file.

Note: Browsers require a user gesture before audio can play. Serve the app over http://localhost or HTTPS — opening index.html directly via file:// may not work reliably.

Project Structure

src/
├── main.ts                    # App bootstrap and animation loop
├── audio/
│   └── AudioEngine.ts         # Media loading, Web Audio graph, playback
├── viz/
│   ├── CircularVisualizer.ts  # Polar bar rendering and peak hold
│   └── palette.ts             # Color gradient helpers
└── ui/
    └── Controls.ts            # File input, drag-drop, play/pause, seek

How It Works

File → <audio>/<video> → MediaElementSource → AnalyserNode → Speakers
                                                    ↓
                                          getByteFrequencyData()
                                                    ↓
                                          Canvas 2D circular ring

Each animation frame reads frequency data from the analyser while the media element plays. No separate timing logic is needed — the visualization follows the live audio output.

Browser Support

Works in modern versions of Chrome, Edge, Firefox, and Safari.

License

Private project.