A stunning web-based audio visualizer that transforms your music into mesmerizing visual art. Experience sound in a whole new dimension with real-time audio visualization that dances to your rhythm.
- Bars: Classic audio frequency bars with dynamic heights
- Wave: Smooth flowing waveform display
- Circular: Mesmerizing circular frequency visualization
- Particles: Dynamic particle system that responds to audio
- Spectrum: Full spectrum frequency analysis display
- Neon Pulse: Vibrant pink and cyan gradients
- Ocean Waves: Cool blue gradients with wave-like motion
- Fire Ember: Warm red and orange gradients
- Galaxy: Purple and blue cosmic gradients
- Custom Themes: Additional gradient combinations
- Microphone Input: Real-time visualization of live audio
- File Upload: Support for MP3, WAV, OGG, and other audio formats
- Drag & Drop: Easy file uploading interface
- Play/Pause: Full playback control for uploaded audio
- Progress Bar: Seek to any position in your audio
- Time Display: Current time and total duration
- Sensitivity Control: Adjust visualization responsiveness
- Fullscreen Mode: Immersive full-screen experience
- Theme Toggle: Switch between light and dark modes
- Responsive Layout: Works perfectly on desktop, tablet, and mobile
- Smooth Animations: Butter-smooth 60fps animations
- Glass Morphism: Modern UI with blur effects and transparency
- Accessibility: Full keyboard navigation and screen reader support
- Download or Clone: Get the project files to your computer
- Open: Launch
home.htmlfor the landing page orindex.htmlfor direct app access - Enjoy: Start visualizing your audio immediately!
# Clone the repository
git clone https://github.com/shirishpothi/soundvisualiser.git
cd sound-visualiser
# Start a local server (Python 3)
python -m http.server 8000
# Or with Node.js
npx serve .
# Open http://localhost:8000 in your browserImportant
Please remember to check microphone permissions before using the microphone features.
- Launch the App: Open the application in your web browser
- Choose Your Audio Source:
- 🎤 Microphone: Click "Use Microphone" for real-time audio visualization
- 📁 File Upload: Drag & drop or click "Upload Audio" to select an audio file
- 🎧 Supported Formats: MP3, WAV, OGG, M4A, and more
-
Select Visualization Style:
- Choose from Bars, Wave, Circular, Particles, or Spectrum
- Each style offers unique visual patterns and animations
-
Pick Your Theme:
- Browse through multiple color themes
- Switch between light and dark modes
- Themes automatically adapt to your visualization style
-
Fine-tune Settings:
- 🎚️ Sensitivity: Adjust how responsive the visualization is to audio
- 🔊 Volume: Control audio playback volume
- ⚡ Performance: Toggle effects for optimal performance
- Spacebar: Play/Pause audio
- Left/Right Arrows: Seek backward/forward
- F: Toggle fullscreen mode
- T: Cycle through themes
- V: Change visualization type
- 🎵 Web Audio API: Advanced audio processing and real-time frequency analysis
- 🎨 Canvas API: High-performance 2D graphics rendering at 60fps
- ⚡ JavaScript ES6+: Modern JavaScript with async/await and modules
- 🎭 CSS3: Advanced styling with custom properties, animations, and responsive design
- 📱 Progressive Web App: Offline capability and mobile optimization
- Modular Design: Separate files for different functionalities
- Performance Optimized: RequestAnimationFrame for smooth animations
- Memory Efficient: Proper cleanup and garbage collection
- Cross-Browser: Polyfills and fallbacks for maximum compatibility
- FFT Analysis: Real-time Fast Fourier Transform for frequency data
- Smoothing Algorithms: Temporal smoothing for stable visualizations
- Dynamic Range: Automatic gain control and normalization
- Low Latency: Optimized for real-time audio processing
/
├── src/ # Source code
│ ├── styles/ # CSS files
│ │ ├── main.css # Main app styles (was styles-new.css)
│ │ ├── home.css # Landing page styles (was home-styles.css)
│ │ └── legacy.css # Legacy styles (was styles.css)
│ ├── scripts/ # JavaScript files
│ │ ├── main.js # Main app logic (was script.js)
│ │ ├── home.js # Landing page logic (was home-script.js)
│ │ └── utils/ # Utility modules (ready for future modularization)
│ └── assets/ # Static assets (ready for future use)
├── config/ # Configuration files
│ ├── netlify.toml # Netlify deployment config
│ ├── lighthouserc.json # Lighthouse CI config
│ └── windsurf_deployment.yaml # Windsurf deployment config
├── scripts/ # Build/deployment scripts
│ └── install.sh # Installation script
├── docs/ # Documentation
│ └── README.md # Detailed project documentation
├── index.html # Main visualizer app (updated paths)
├── home.html # Landing page (updated paths)
├── package.json # Dependencies and scripts
├── package-lock.json # Dependency lock file
└── LICENSE # License file
src/: Contains all source code organized by typestyles/: CSS files with clear naming conventionsscripts/: JavaScript files with modular structureassets/: Static assets like images, fonts, etc.
config/: Configuration files for deployment and CI/CDscripts/: Build and deployment automation scriptsdocs/: Project documentation and guides
Note
SoundWave is designed to work best on Chromium based browsers.
| Browser | Version | Support Level |
|---|---|---|
| Chrome | 66+ | ✅ Full Support |
| Firefox | 60+ | ✅ Full Support |
| Safari | 11.1+ | ✅ Full Support |
| Edge | 79+ | ✅ Full Support |
| Opera | 53+ | ✅ Full Support |
- Web Audio API
- Canvas 2D Context
- ES6 Modules
- CSS Custom Properties
We welcome contributions! Here's how you can help:
- 🐛 Report Bugs: Open an issue with detailed reproduction steps
- 💡 Suggest Features: Share your ideas for new visualizations or improvements
- 🔧 Submit Pull Requests: Fix bugs or add new features
- 📖 Improve Documentation: Help make the docs clearer and more comprehensive
# Fork and clone the repository
git clone <enter-fork-url>
cd sound-visualiser
# Install dependencies
npm install
# Start development server
npm run dev
# Create a feature branch
git checkout -b feature/feature-name
# Make your changes and test thoroughly
npm run lint # Check code quality
npm run format # Format code
npm run lighthouse # Test performance
# Commit with descriptive messages
git commit -m "Add amazing new visualization type"
# Push and create a pull request
git push origin feature/feature-nameThis project uses GitHub Actions for continuous integration and deployment:
- Code Quality: ESLint, Prettier, HTML validation
- Security Scanning: CodeQL, dependency audits, vulnerability scans
- Performance Testing: Lighthouse CI with accessibility checks
- Automated Deployment: GitHub Pages and Netlify integration
- GitHub Pages: Automatic deployment on main branch
- Netlify: Preview deployments for pull requests
- Pull Request Previews: Every PR gets a preview deployment
- Daily security scans
- Dependency vulnerability monitoring
- Automated dependency updates via Dependabot
- SARIF security reporting
This project is licensed under the GPL-3.0 License.
- You can use, modify, and distribute the project for any purpose
- You must provide attribution to the original creators
- You cannot use the project for commercial purposes without permission
- You must include the license and attribution notice in all copies or substantial portions of the project
When using or modifying this project, please include:
SoundWave Audio Visualisation Studio
Original work by Shirish
Licensed under GPL-3.0 License
For commercial licensing inquiries, please contact shirish.pothi.27@gmail.com.
- Web Audio API Community: For excellent documentation and examples
- Canvas API Contributors: For powerful 2D graphics capabilities
- Open Source Community: For inspiration and best practices
- Audio Visualization Pioneers: For paving the way in digital audio art
- You: For being part of the SoundWave journey!
Made with ❤️ by Shirish, for the audio visualization community