# 🎵 Audio Visualizer Pro

Professional-grade audio visualization web application built with **Tailwind CSS** and Vanilla JavaScript.

## ✨ Features

### Visualization Modes (6)
- 🔵 **Particles** - Dynamic particle system
- 🌊 **Waves** - Flowing wave patterns
- 📊 **Bars** - Classic spectrum bars
- 🌀 **Spiral** - Rotating spiral effect
- 🌌 **Galaxy** - Orbital particle motion
- 🧬 **DNA** - Double helix pattern

### Color Schemes (5)
- 💎 Neon (Cyan + Pink)
- 🔥 Fire (Red + Yellow)
- 🌊 Ocean (Blue + Cyan)
- 🌅 Sunset (Orange + Pink)
- 🌲 Forest (Green + Lime)

### Audio Features
- 🎤 Microphone input
- 📁 Audio file upload
- 🎚️ 10-band equalizer
- 🎵 Beat detection & BPM counter
- 📊 Real-time spectrum analyzer
- 🔊 Volume control

### Recording & Export
- 📹 Video recording (4 quality levels: Low, Medium, High, Ultra)
- 📸 Screenshot with watermark
- 💾 Settings export/import
- 🔗 Share settings via URL

### User Experience
- 🎨 4 themes (Dark, Light, Midnight, Sunset)
- 📱 PWA support (installable)
- 🔌 Offline mode
- ⌨️ 15+ keyboard shortcuts
- 👆 7 touch gestures
- 🎯 6 quick presets
- 📚 Interactive tutorial
- 🌐 Fully responsive

## 🚀 Quick Start

### Installation
```bash
# Clone or download
git clone https://github.com/yourusername/audio-visualizer.git

# Open in browser
open index.html
```

### Usage
1. Click ⚙️ to open controls
2. Choose audio input (🎤 Microphone or 📁 Upload)
3. Select visualization mode
4. Customize colors and settings
5. Press H for help

## ⌨️ Keyboard Shortcuts

| Key | Action |
|-----|--------|
| `H` | Show/Hide Help |
| `F` | Toggle Fullscreen |
| `D` | Toggle Demo Mode |
| `S` | Take Screenshot |
| `R` | Start/Stop Recording |
| `T` | Change Theme |
| `V` | Cycle Visualizer Modes |
| `1-6` | Quick Presets |
| `Space` | Play/Pause |
| `Esc` | Close Panel |
| `↑↑↓↓←→←→BA` | Rainbow Mode 🌈 |

## 👆 Touch Gestures

| Gesture | Action |
|---------|--------|
| Swipe Left | Open Controls |
| Swipe Right | Close Controls |
| Double Tap | Fullscreen |
| Triple Tap | Demo Mode |
| Long Press | Fullscreen |
| Pinch | Adjust Particles |
| Shake | Randomize Settings |

## 🎯 Quick Presets

Press number keys for instant presets:

1. 🌊 **Chill Vibes** - Relaxing waves
2. 🎉 **Party Mode** - High energy
3. 🎯 **Focus** - Minimal bars
4. ⚡ **Energetic** - Dynamic spiral
5. ✨ **Minimal** - Clean particles
6. 🌈 **Psychedelic** - Maximum chaos

## 🛠️ Technical Stack

- **Framework**: Vanilla JavaScript (ES6+)
- **Styling**: Tailwind CSS (CDN)
- **Audio**: Web Audio API
- **Canvas**: HTML5 Canvas 2D
- **PWA**: Service Worker + Manifest
- **Storage**: LocalStorage for preferences

## 📊 Performance

- 60 FPS target
- GPU acceleration enabled
- Optimized for mobile devices
- Battery-aware particle reduction
- Lazy loading for heavy features
- Debounced resize handlers

## 🎨 Customization

### Settings
- Particle count: 100-2000
- Sensitivity: 10-100
- Recording quality: Low/Medium/High/Ultra
- EQ presets: Flat, Bass, Treble, Vocal, Rock, Pop, Jazz, Classical

### Export/Import
- Export settings as JSON
- Import settings from file
- Share settings via URL parameters

## 📱 Mobile Optimization

- Touch-friendly controls
- Haptic feedback (vibration)
- Reduced particle count on low battery
- Orientation change support
- Gesture controls
- Responsive layout

## 🔧 Browser Support

- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)

## 📄 License

MIT License - feel free to use in your projects!

## 🙏 Credits

Built with ❤️ using:
- Tailwind CSS
- Web Audio API
- HTML5 Canvas
- Service Workers

## 🐛 Known Issues

- Safari may require user interaction before audio starts
- Some mobile browsers limit recording quality
- Fullscreen API may not work in all contexts

## 🚀 Future Features

- [ ] More visualization modes
- [ ] Audio effects (reverb, delay, etc.)
- [ ] Playlist support
- [ ] Social media integration
- [ ] Cloud save/sync
- [ ] Collaborative sessions

## 📞 Support

For issues or questions:
- GitHub Issues: [link]
- Email: support@example.com
- Discord: [link]

---

**Made with Tailwind CSS** 🎨 | **Powered by Web Audio API** 🎵 | **Open Source** 💚