🎵 Real-time audio visualization powered by your microphone 🎵
A futuristic, browser-based music visualizer that reacts to live microphone input with stunning particle animations and customizable visual effects. No downloads, no plugins—just pure Web Audio API magic.
Real-time audio capture and visualization using the Web Audio API. Your audio never leaves your browser—completely privacy-first.
- Central bass pulse that glows with low-frequency sounds
- Particle system (100 particles) with audio-reactive connections
- Optional EQ frequency spectrum bars for detailed visualization
- Wave motion effects that flow with the music
- PUNCH: Adjust audio gain/sensitivity (0.3x to 1.5x multiplier)
- VIBE: Control wave motion intensity and frequency
- MOOD: Switch color palettes (Cool Blue, Warm Orange, Full Spectrum)
- EQ Toggle: Show/hide frequency spectrum bars
- UI auto-hide after 3 seconds of inactivity (cursor hides too!)
- Fullscreen mode for unobstructed viewing
- Responsive design works on desktop, tablet, and mobile
- Privacy-first: Audio processing happens entirely in-browser
- Framework: React 19 with TypeScript
- Build Tool: Vite 6 (lightning-fast HMR)
- Styling: Tailwind CSS 3 (CDN)
- Audio Processing: Web Audio API (AnalyserNode, GainNode, AGC)
- Rendering: HTML5 Canvas 2D
- Node.js 20+ (LTS recommended)
- npm or yarn
- Modern browser with microphone support
-
Clone the repository:
git clone https://github.com/YourUsername/cyberpulse-visualizer.git cd cyberpulse-visualizer -
Install dependencies:
npm install
-
Start development server:
npm run dev
-
Open in browser: Navigate to
http://localhost:5173(or the port shown in terminal) -
Activate microphone:
- Click "Activate Microphone" button
- Grant microphone permissions when prompted
- Play music, sing, or make sounds to see visuals react!
npm run buildBuilt files will be in the dist/ directory, optimized and ready for deployment.
npm run previewcyberpulse-visualizer/
├── components/ # React components
│ ├── Visualizer.tsx # Main canvas visualizer
│ ├── ControlsPanel.tsx # User controls
│ └── ...
├── hooks/ # Custom React hooks
│ ├── useMicrophoneData.ts
│ └── useMockAudioData.ts
├── utils/ # Utility functions
├── public/ # Static assets
├── App.tsx # Main app component
├── index.tsx # App entry point
└── vite.config.ts # Build configuration
All configuration is done through constants.ts - no environment variables required for basic functionality.
Edit constants.ts to adjust:
- FFT size (frequency resolution)
- Smoothing time constants
- Frequency ranges for bass/treble detection
- Visual sensitivity thresholds
Modify Visualizer.tsx:
- Particle count and behavior
- Color schemes and gradients
- Connection line rendering
- Animation physics
- ✅ Chrome/Edge 89+
- ✅ Firefox 88+
- ✅ Safari 14.1+
- ✅ Opera 75+
Required APIs:
- Web Audio API
- MediaDevices.getUserMedia
- Canvas 2D Context
- RequestAnimationFrame
See DEPLOYMENT.public.md for detailed deployment instructions for:
- Firebase Hosting
- Vercel
- Netlify
- GitHub Pages
- Cloudflare Pages
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please ensure:
- Code follows TypeScript best practices
- Components are properly typed
- No console errors or warnings
- Tested across major browsers
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with React and Vite
- Styled with Tailwind CSS
- Audio powered by Web Audio API
Have questions or feedback?
- Open an issue on GitHub
- Submit a pull request
- Star the repo if you find it useful!
Made with 💜 by the open-source community