🎧 Experience music like never before with stunning real-time audio visualizations!
Transform your audio into mesmerizing visual experiences with multiple visualization modes, customizable themes, and responsive design that works perfectly on all devices.
- 📊 Frequency Bars - Classic spectrum analyzer with gradient effects
- 🌊 Waveform - Smooth oscilloscope-style visualization
- ⭕ Circular - Radial frequency display with center branding
- 🎆 Particles - Dynamic particle system with network connections
- 📁 File Upload - Support for all audio formats
- 🎤 Microphone Input - Real-time microphone visualization
▶️ Playback Controls - Play, pause, and seek functionality- 🔊 Volume Control - Adjustable audio levels
- 🌈 5 Color Themes - Purple, Pink, Blue, Green, Sunset
- ⚡ Sensitivity Control - Adjust visualization responsiveness
- 📱 Fully Responsive - Perfect on desktop, tablet, and mobile
- 🌙 Dark Theme - Easy on the eyes design
- 🚀 Smooth 60fps - Optimized canvas rendering
- 🎯 Real-time Analysis - Web Audio API integration
- 💾 Lightweight - No heavy dependencies
- 🔄 Auto-refresh - Quick reset functionality
Check out the live demo: VisualCodePo Live
- Modern web browser with Web Audio API support
- Local web server (for development)
git clone https://github.com/Dikrey/AudioSpectrum.git
cd AudioSpectrum- Fork this repository
- Connect your Netlify account to GitHub
- Deploy automatically from your fork
- Click "Choose Audio" button
- Select any audio file from your device
- Use playback controls to play/pause
- Switch between visualization modes
- Click "Microphone" button
- Allow browser microphone access
- Start making noise or playing music
- Watch real-time visualization
- Click Settings button (or mobile menu)
- Choose your preferred color theme
- Adjust sensitivity slider
- Experiment with different modes
// Add to colorThemes object in script.js
this.colorThemes = {
// ... existing themes
custom: ['#ff6b6b', '#4ecdc4'] // Add your theme
};// Modify sensitivity range
<input type="range" id="sensitivitySlider" min="1" max="15" value="7">The visualizer automatically adapts to screen size. For custom mobile layouts, modify the responsive CSS media queries.
We welcome contributions! Please follow these guidelines:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- 🐛 Bug fixes
- ✨ New features
- 📝 Documentation improvements
- 🎨 UI/UX enhancements
- ⚡ Performance optimizations
This project is the intellectual property of Raihan_Official0307 x VisualCodePo.
- ✅ Use for personal projects
- ✅ Fork and modify for learning
- ✅ Deploy to your own server
- ✅ Contribute improvements via Pull Requests
- ❌ Remove original creator credits
- ❌ Reupload as your own work
- ❌ Rebrand without attribution
- ❌ Remove copyright notices
- ❌ Sell or commercialize without permission
If you use, modify, or deploy this project, you MUST keep the following credits visible:
<!-- Footer Credits (Must Remain Visible) -->
<div class="developer-credit">
<i class="fas fa-code"></i>
Developed by Raihan_Official0307 x VisualCodePo
</div>
<!-- Modal Credits (Must Remain Intact) -->
<p>
Website ini dibuat oleh <strong>Raihan_Official0307</strong> x <strong>VisualCodePo</strong>
</p>- This project is protected under intellectual property laws
- Violation of credit requirements may result in legal action
- We monitor unauthorized use and reuploads
- Proper attribution is non-negotiable
- Check browser permissions for microphone access
- Ensure audio files are supported formats
- Try refreshing the page (click Refresh button)
- Ensure you're using a modern browser
- Check if local storage is enabled
- Try in landscape mode for better experience
- Close other browser tabs
- Lower the sensitivity setting
- Try a simpler visualization mode
- GitHub: @Raihan_Official0307
- Instagram: @Raihan_Official0307
- TikTok: @Raihan_Official0307
- Website: VisualCodePo.com
- Font Awesome - For amazing icons
- Web Audio API - For audio processing capabilities
- Canvas API - For smooth visualizations
- All Contributors - Who help improve this project
Copyright (c) 2025 Raihan_Official0307 x VisualCodePo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
1. The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
2. Credits to the original creators "Raihan_Official0307 x VisualCodePo" must remain
visible and unmodified in all versions and derivatives.
3. Rebranding, removing credits, or claiming ownership is strictly prohibited.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
