Pulseon

Professional Music Visualizer

Experience stunning audio-reactive visualizations with dynamic background effects, professional-grade animations, and immersive particle systems.

✨ Features

🎨 Professional Visualization Modes

• 📊 Spectrum Bars - 128 high-resolution frequency bars with dynamic gradients
• 🔄 Circular Spectrum - Radial frequency visualization with rotating bars
• 🌊 Waveform - Multi-layered oscilloscope with real-time audio analysis
• ✨ Particle Visualization - Frequency-driven particle explosion effects
• 🌌 Galaxy Visualization - Spiral galaxy effect with audio-reactive elements

🎭 Advanced Visual Effects

• 🌈 Dynamic Background - Background.png with endless hue shifting based on bass
• ✨ Particle Systems - 150+ particles with physics simulation and glow effects
• 🌟 Bloom Effects - Professional post-processing with screen blend modes
• 🎭 Bass-Responsive Animations - Visual elements react to bass intensity
• 🔄 Smooth Transitions - 85% smoothing for fluid animations

🎵 Audio Processing

• 🔊 High-Resolution Analysis - 2048 FFT for detailed frequency data
• 📊 Real-time Frequency Bands - Separate bass, mid, and treble tracking
• 🎚️ Professional Audio Controls - Volume, seek, and playback controls
• 📁 Audio File Support - MP3, WAV, FLAC, OGG, WebM formats
• 🎮 Drag & Drop Upload - Modern file upload with progress tracking

🎮 Interactive Controls

• ⌨️ Keyboard Shortcuts:
  • V - Cycle through visualization modes
  • P - Toggle particle effects
  • B - Toggle bloom effects
  • W - Toggle wave effects
• 🎚️ Precision Controls - Volume slider and seek bar
• 📱 Touch Interface - Fully responsive mobile controls

🎨 Design & UI

• 🔮 Glassmorphism Design - Modern frosted glass aesthetic
• 🌈 Dynamic Color System - HSL color manipulation with real-time shifting
• 📱 Responsive Layout - Desktop, tablet, and mobile optimized
• ✨ Professional Animations - 60 FPS smooth rendering
• 🎯 FontAwesome Icons - Enhanced visual interface

🚀 Quick Start

🌐 Live Demo

Open your browser and visit: https://independent-coder.github.io/Pulseon/

💻 Local Setup

1. Clone the repository:

   git clone https://github.com/independent-coder/Pulseon.git
   cd Pulseon

2. Open index.html in your favorite web browser:

   # Using Python 3
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   
   # Or simply open index.html directly
   open index.html

3. Upload an audio file and start visualizing! 🎵

📖 Usage Guide

🎵 Playing Audio Files

1. Upload Audio - Click the upload area or drag & drop your audio file
2. Playback Controls - Use play/pause button and volume slider
3. Seek Control - Click on the progress bar to jump to any position
4. Visualization Modes - Press V to cycle through 5 professional modes
5. Effects Toggle - Use keyboard shortcuts to enable/disable effects

🎨 Visual Effects

• Background Hue Shifting - Your Background.png shifts through the entire color spectrum based on bass intensity
• Particle Systems - Dynamic particles that respond to audio frequencies
• Bloom Effects - Professional glow and post-processing effects
• Bass Animations - Visual elements pulse and react to bass beats

⌨️ Keyboard Controls

• V - Switch between Spectrum, Circular, Waveform, Particle, and Galaxy modes
• P - Enable/disable particle effects
• B - Enable/disable bloom effects
• W - Enable/disable wave effects

🏗️ Technical Stack

🎯 Core Technologies

• HTML5 - Semantic markup and structure
• CSS3 - Modern styling with glassmorphism and animations
• Vanilla JavaScript - ES6+ with no framework dependencies
• Web Audio API - Professional audio analysis and processing
• Canvas API - Real-time 2D visualizations and effects

🎨 Design System

• CSS Variables - Comprehensive theming system
• Glassmorphism - Modern frosted glass aesthetic
• Responsive Grid - Mobile-first design approach
• FontAwesome 6.5.1 - Professional icon library
• CSS Animations - Smooth transitions and micro-interactions

🔊 Audio Architecture

• AnalyserNode - 2048 FFT resolution for detailed frequency analysis
• Frequency Band Processing - Separate bass, mid, and treble tracking
• Smoothing Algorithm - 85% smoothing for fluid visualizations
• Real-time Processing - 60 FPS audio-reactive animations

🎮 Visualization Engine

• Canvas 2D Context - Hardware-accelerated rendering
• Particle Physics - Velocity, gravity, and collision simulation
• Color Manipulation - HSL color space for dynamic effects
• Blend Modes - Professional compositing and bloom effects

📁 Project Structure

Pulseon/
├── index.html          # Main application file
├── styles.css          # Complete styling with glassmorphism
├── script.js           # Professional visualizer engine
├── Background.png      # Dynamic background image (user-provided)
├── README.md           # Project documentation
└── .gitignore          # Git ignore rules

🌐 Browser Compatibility

✅ Supported Browsers

• Chrome 66+ (Web Audio API support)
• Firefox 60+ (Full feature support)
• Safari 12+ (iOS and desktop)
• Edge 79+ (Chromium-based)
• Opera 53+ (Web Audio API)

📱 Mobile Support

• iOS Safari 12+
• Chrome Mobile 66+
• Firefox Mobile 60+
• Samsung Internet 9+

🎨 Customization

🌈 Background Customization

1. Replace Background.png with your image
2. The background will automatically shift hues based on bass intensity
3. Adjust CSS variables for different color schemes

🎭 Visualization Modes

• Modify drawVisualization() method in script.js
• Add new visualization modes to the switch statement
• Update keyboard shortcuts for new modes

✨ Effects Configuration

• Adjust settings object in the constructor
• Modify particle counts, bloom intensity, and smoothing factors
• Fine-tune color saturation and brightness values

🔧 Development

🎯 Architecture Highlights

• Object-Oriented Design - Clean class-based structure
• Event-Driven - Responsive user interactions
• Performance Optimized - Efficient rendering and memory management
• Modular Functions - Separated visualization modes for maintainability

🚀 Performance Features

• RequestAnimationFrame - Smooth 60 FPS rendering
• Canvas Optimization - Efficient drawing operations
• Memory Management - Proper cleanup and resource handling
• Responsive Design - Adaptive layouts for all screen sizes

🤝 Contributing

🎯 How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 Contribution Guidelines

• Code Style: Follow existing conventions
• Performance: Ensure 60 FPS on all devices
• Accessibility: Maintain ARIA labels and semantic HTML
• Documentation: Update README for new features

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📜 License Summary

• ✅ Commercial use: Allowed
• ✅ Modification: Allowed
• ✅ Distribution: Allowed
• ✅ Private use: Allowed
• ❌ Liability: No warranty provided
• ❌ Trademark: No trademark grant

🙏 Acknowledgments

🎵 Audio API Inspiration

• Web Audio API - W3C Audio Working Group
• Audio Visualization - Creative coding community
• DSP Techniques - Digital signal processing pioneers

🎨 Design Resources

• FontAwesome - Professional icon library
• Glassmorphism - Modern UI design trend
• CSS Animations - Smooth transition techniques

🌟 Community

• GitHub - Platform and community
• Open Source - Collaborative development
• Creative Coding - Visualization and generative art community

📞 Contact

🌐 Social Links

• GitHub: @independent-coder
• Website: independent-coder.github.io

---

🎵 Made with passion for audio visualization and web technology 🎵

⭐ Star this repo • 🍴 Fork this repo • 🐛 Report issues