This project is an interactive audio visualizer built with React and Vite. It renders real-time visualizations of audio input on a canvas, designed for performance, responsiveness, and easy customization. The codebase emphasizes modularity, with separate components for the canvas visualization, controls panel, theme handling, and transport bar, allowing developers to extend features such as additional visual styles, input sources, and export options.
Check out the demo video below 👇
or click the button:
Key goals:
- Provide a visually engaging, real-time representation of audio data.
- Offer a lightweight, extensible architecture suitable for experimentation and customization.
- Include practical UI components (controls, theme picker, and transport) to manage playback and visuals.
- Facilitate local development and quick iteration with a straightforward run locally workflow.
What you’ll find in this repo:
- A React + Vite setup for a performant single-page app.
- Canvas-based visualizer core (CanvasVisualizer.tsx) and supporting UI components.
- Hooks for audio engine and recording capabilities.
- Utilities for colors, beat detection, and exporting visuals.
- A preview set of visual frames and a minimal CSS baseline.
How to get started:
- Install dependencies: npm install
- Run locally: npm run dev
Tech Stack: React, TypeScript, Vite, Canvas API Development workflow: npm install, npm run dev
Prerequisites: Node.js
- Git clone this repo and install Node Js
- Install dependencies:
npm install - Run the app:
npm run dev
Request new style Waveform ? if you know any good effect drop a comment here
- MP4 sound may have noise in the background, I have tried several time but I don't know how to fix it 😆 just mute it and use Video editor!
- I develop this application by Gemini AI studio, I DON't Know coding!
This project is licensed under the MIT License - see the LICENSE file for details.