Overview
Transform any MP3 or WAV into a professional video with dynamic pastel-neon visuals—completely in your browser. This comprehensive audio visualizer boilerplate for Next.js provides everything you need to create stunning music videos, podcast visualizations, and social media content without any external dependencies or subscriptions. Built for developers and content creators who value privacy, performance, and complete creative control.
Tech Stack
This project leverages cutting-edge web technologies for maximum performance and compatibility:
- Frontend Framework: Next.js with Pages Router and TypeScript
- 3D Graphics Engine: Three.js for real-time visualization rendering
- Audio Processing: Web Audio API for frequency analysis and audio manipulation
- Video Capture: MediaRecorder API for high-quality browser-based recording
- Styling: CSS Modules for component-scoped styling
- Shaders: Custom GLSL shaders for advanced visual effects
- Language: TypeScript for type-safe development
- Browser Compatibility: Modern browsers (Chrome, Firefox, Safari, Edge)
Features
🎵 Audio Processing
- ✅ Multiple format support: MP3, WAV, and most common web audio formats
- ✅ Real-time frequency analysis using Web Audio API
- ✅ Optimized for 128 kbps+ MP3 files for best visual results
- ✅ Client-side processing ensures 100% privacy—your audio never leaves your machine
🎬 Video Recording
- ✅ High-quality recording up to 60 FPS with configurable bitrate
- ✅ Multiple output formats: WebM and MP4 compatibility
- ✅ Three quality profiles optimized for different use cases:
- Short: Up to 5 minutes @60 FPS (perfect for social media clips)
- Medium: Up to 30 minutes @30 FPS (ideal for podcast segments)
- Long: Up to 2 hours @24 FPS (full-length content)
📱 Format Flexibility
- ✅ Landscape (16:9): Perfect for YouTube, websites, and presentations
- ✅ Portrait (9:16): Optimized for Instagram Stories, TikTok, and mobile content
- ✅ Square (1:1): Ideal for Instagram posts and versatile social sharing
🎨 Visual Customization
- ✅ Dynamic pastel-neon visualizations with pulsating effects
- ✅ Customizable GLSL shaders in PastelNeonPulsatingVisualizer.tsx
- ✅ Real-time frequency-responsive visual elements
- ✅ Expandable visualization system (additional visualizers coming soon)
🚀 Developer Experience
- ✅ Instant setup: Clone, install, and run in minutes
- ✅ Zero external dependencies or API keys required
- ✅ Fully customizable codebase with TypeScript
- ✅ Modern Next.js App Router architecture
- ✅ Component-based architecture for easy modification
🔒 Privacy & Security
- ✅ 100% client-side processing—no server uploads
- ✅ No data collection or tracking
- ✅ No monthly subscriptions or usage limits
- ✅ One-time purchase, use forever
Perfect For
🎬 Content Creators
- YouTube Creators: Add eye-catching overlays and backgrounds to music content
- Podcasters: Convert audio episodes into shareable video clips for social media
- Social Media Influencers: Create engaging Stories, Reels, and TikToks in seconds
🎵 Music Industry
- Musicians & DJs: Generate professional music visuals without expensive editing software
- Record Labels: Create promotional content for new releases
- Music Producers: Visualize beats and compositions for client presentations
💼 Business Applications
- Marketing Agencies: Create audio-visual content for brand campaigns
- Educational Content: Transform audio lessons into engaging video format
- Corporate Training: Add visual elements to audio presentations
How It Works
Step 1: Setup & Configuration
- Clone the repository and runÂ
npm install
- Start the development server withÂ
npm run dev
- Access your local audio visualizer atÂ
localhost:3000
Step 2: Recording Configuration
- Select your recording profile based on content length:
- Short: Up to 5 minutes @60 FPS
- Medium: Up to 30 minutes @30 FPS
- Long: Up to 2 hours @24 FPS
- Choose your aspect ratio (16:9, 9:16, or 1:1)
- Configure quality settings and bitrate preferences
Step 3: Audio Processing
- Upload your audio file (MP3/WAV supported)
- The Web Audio API analyzes frequency data in real-time
- Three.js renders dynamic visualizations based on audio frequencies
Step 4: Recording & Export
- Click “Start Recording”