🎵 Futuristic Music Visualizer

A cutting-edge, full-featured music visualizer designed for concerts, DJ sets, and immersive audio-visual experiences. Features real-time audio analysis, multiple visualization modes, particle effects, beat detection, and a cyberpunk aesthetic.

✨ Features

🎨 Visualization Modes

• Waveform: Classic oscilloscope-style waveforms with multiple styles
• Frequency Spectrum: Real-time frequency analysis with bars, lines, and circular displays
• 3D Particles: Interactive particle systems with explosion, flow, spiral, galaxy, and rain effects
• Radial Patterns: Circular mandala, flower, kaleidoscope, ripple, and spiral visualizations

🎵 Audio Processing

• Real-time Analysis: High-performance FFT analysis with multiple frequency bands
• Beat Detection: Intelligent beat detection with tempo tracking and rhythm classification
• Multiple Input Sources: File upload, drag & drop, and microphone input
• Audio Reactivity: All visuals respond dynamically to bass, mid, and treble frequencies

🎯 Effects & Enhancements

• Trail Blur: Smooth motion trails for fluid animations
• Glow Effects: Dynamic glow and bloom effects
• Beat-Sync Animation: Special effects triggered by beat detection
• Particle Physics: Advanced particle systems with realistic physics
• Color Reactivity: Colors shift and pulse based on audio frequencies

🌈 Themes & Customization

• 5 Built-in Themes: Cyberpunk, Synthwave, Neon, Aurora, Plasma
• Dynamic Color System: Audio-reactive color palettes
• Real-time Theme Switching: Instant theme changes with smooth transitions
• Custom Color Palettes: Create and save custom color schemes

⚡ Performance

• 60+ FPS: Optimized for high frame rate performance
• Adaptive Quality: Automatic performance optimization
• WebGL Support: Hardware-accelerated rendering when available
• Memory Management: Efficient resource usage and cleanup

🚀 Quick Start

1. Open the visualizer: Open index.html in a modern web browser
2. Load music:
   • Click "Choose File" to upload an audio file
   • Drag & drop audio files onto the interface
   • Click "Use Microphone" for live input
3. Customize: Use the control panels to adjust themes, effects, and visualizer modes
4. Enjoy: Full-screen mode for maximum immersion!

🎮 Controls

🎵 Audio Controls

• Play/Pause: Spacebar or click the play button
• Volume: Mouse wheel over the interface
• File Upload: Drag & drop or use file picker
• Microphone: Toggle live microphone input

🎨 Visual Controls

• Theme Switching: Use theme selector or number keys (1-5)
• Visualizer Mode: Cycle through modes with Tab key
• Effect Toggles: Enable/disable individual effects
• Full Screen: F key or double-click

⌨️ Keyboard Shortcuts

• Spacebar: Play/Pause
• Tab: Next visualizer mode
• 1-5: Switch themes
• F: Toggle full screen
• M: Toggle microphone input
• E: Toggle effects panel
• T: Toggle theme panel

📁 Project Structure

Music Visualiser/
├── index.html                 # Main application file
├── styles/
│   ├── main.css              # Core styling and layout
│   ├── ui.css                # UI components and controls
│   └── themes.css            # Theme definitions
├── js/
│   ├── main.js               # Application coordinator
│   ├── core/
│   │   └── AudioEngine.js    # Audio processing and analysis
│   ├── visualizers/
│   │   ├── VisualizerCore.js # Base visualizer class
│   │   ├── WaveformVisualizer.js
│   │   ├── SpectrumVisualizer.js
│   │   ├── ParticleVisualizer.js
│   │   └── RadialVisualizer.js
│   ├── effects/
│   │   ├── BeatDetector.js   # Beat detection and analysis
│   │   └── EffectsProcessor.js
│   ├── ui/
│   │   ├── UIController.js   # Interface management
│   │   └── ThemeManager.js   # Theme system
│   └── utils/
│       ├── PerformanceMonitor.js
│       └── ColorPalette.js

🛠️ Technical Requirements

• Modern Browser: Chrome, Firefox, Safari, or Edge (latest versions)
• Web Audio API: Required for audio processing
• Canvas 2D/WebGL: For visualization rendering
• File API: For drag & drop functionality
• MediaDevices API: For microphone input

🎪 Perfect For

• DJ Sets: Live background visuals for performances
• Concerts: Large screen projections synchronized with music
• Streaming: Background visuals for music streams
• Parties: Interactive visual entertainment
• Audio Analysis: Real-time frequency and beat analysis

🔧 Customization

Adding New Themes

// In ThemeManager.js
this.themes.myTheme = {
    name: 'My Theme',
    colors: {
        primary: '#your-color',
        secondary: '#your-color',
        // ... more colors
    }
};

Creating Custom Visualizers

// Extend VisualizerCore class
class MyVisualizer extends VisualizerCore {
    render(audioData, canvasCtx) {
        // Your visualization code here
    }
}

📈 Performance Tips

• Use Chrome for best performance (optimized V8 engine)
• Enable hardware acceleration in browser settings
• Close other tabs to free up system resources
• Use full-screen mode for maximum performance
• Lower quality settings on older hardware

🎵 Supported Audio Formats

• MP3: Most common format
• WAV: Uncompressed, highest quality
• AAC: Apple's format
• OGG: Open source alternative
• M4A: Apple's container format
• FLAC: Lossless compression (browser dependent)

🌟 Tips for Best Results

1. High-quality audio: Better source = better visuals
2. Full-screen mode: Maximum immersion
3. Adjust sensitivity: Fine-tune beat detection for your music style
4. Experiment with themes: Different genres work better with different themes
5. Layer effects: Combine multiple effects for unique looks

🚀 Future Enhancements

• VR/AR compatibility
• Video export functionality
• MIDI controller support
• Advanced shader effects
• Social sharing features
• Plugin system for custom visualizers

📝 License

This project is open source. Feel free to modify and distribute according to your needs.

---

Made for music lovers, by music lovers 🎵✨

Turn your screen into a window to the rhythm of the universe.