{"id":29905384,"url":"https://github.com/webprofusion/web-audio-viz","last_synced_at":"2025-08-01T19:12:32.225Z","repository":{"id":307469093,"uuid":"1029613990","full_name":"webprofusion/web-audio-viz","owner":"webprofusion","description":"Web Audio Visualizer inspired by winamp","archived":false,"fork":false,"pushed_at":"2025-07-31T10:13:21.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-31T13:55:05.428Z","etag":null,"topics":["audio-visualizer"],"latest_commit_sha":null,"homepage":"https://audio-viz.soundshed.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webprofusion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-31T10:00:09.000Z","updated_at":"2025-07-31T10:13:46.000Z","dependencies_parsed_at":"2025-07-31T14:05:43.250Z","dependency_job_id":null,"html_url":"https://github.com/webprofusion/web-audio-viz","commit_stats":null,"previous_names":["webprofusion/web-audio-viz"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/webprofusion/web-audio-viz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webprofusion%2Fweb-audio-viz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webprofusion%2Fweb-audio-viz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webprofusion%2Fweb-audio-viz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webprofusion%2Fweb-audio-viz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webprofusion","download_url":"https://codeload.github.com/webprofusion/web-audio-viz/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webprofusion%2Fweb-audio-viz/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268282124,"owners_count":24225164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio-visualizer"],"created_at":"2025-08-01T19:12:31.398Z","updated_at":"2025-08-01T19:12:32.209Z","avatar_url":"https://github.com/webprofusion.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎵 Web Audio Visualizer\n\nA retro-style web-based music visualizer inspired by classic Winamp screensavers. Drop in your audio files and enjoy stunning real-time visualizations that react to your music!\n\n![Web Audio Visualizer Demo](https://img.shields.io/badge/Status-Live-green)\n\n## ✨ Features\n\n### 🎮 **Audio Player**\n- **Drag \u0026 Drop Support**: Simply drop MP3, WAV, and other audio files\n- **Multi-file Playlist**: Load multiple tracks and navigate between them\n- **Full Controls**: Play, pause, stop, previous/next, seek, volume control\n- **Track Information**: Display current track name and playback time\n\n### 🌈 **Visualization Modes**\n- **Frequency Bars**: Classic spectrum analyzer with colorful bars\n- **Waveform**: Real-time audio waveform display\n- **Circular**: Radial frequency visualization\n- **Spiral**: Mesmerizing spinning spiral patterns\n- **Particles**: Audio-reactive particle system\n\n### 🎨 **Visual Effects**\n- **Retro Styling**: Neon green, magenta, and cyan color scheme\n- **Glowing Effects**: CSS shadows and particle glow\n- **Particle Overlay**: Optional floating particles on any visualization\n- **Sensitivity Control**: Adjust visualization responsiveness\n- **Smooth Animations**: 60fps canvas-based rendering\n\n### 🔲 **Fullscreen Mode**\n- **Immersive Experience**: Hide UI for full-screen visualization\n- **Floating Controls**: Minimal controls in fullscreen\n- **Keyboard Shortcuts**: F11 or 'F' to toggle, Escape to exit\n- **Responsive Design**: Adapts to any screen size\n\n## 🚀 Quick Start\n\n1. Open `index.html` in a modern web browser\n2. Drag \u0026 drop audio files or click \"Select Files\"\n3. Use player controls to manage playback\n4. Switch between visualization modes\n5. Click \"🔲 Fullscreen\" for immersive experience\n\n## 🎯 Usage\n\n### Loading Music\n- **Drag \u0026 Drop**: Drop audio files directly onto the interface\n- **File Browser**: Click \"Select Files\" to browse your music library\n- **Supported Formats**: MP3, WAV, FLAC, OGG, and most web-supported audio formats\n\n### Controls\n- **▶️/⏸️**: Play/Pause current track\n- **⏹️**: Stop and reset to beginning\n- **⏮️/⏭️**: Previous/Next track\n- **Progress Bar**: Click to seek to any position\n- **Volume**: Adjust playback volume\n\n### Visualizations\n- **Mode Selector**: Choose from 5 different visualization types\n- **Particles Toggle**: Add/remove floating particle effects\n- **Sensitivity**: Control how reactive visuals are to audio\n\n### Fullscreen\n- **Enter**: Click fullscreen button or press 'F'\n- **Exit**: Press Escape or click exit button\n- **Controls**: Floating panel in top-right corner\n\n## 🛠️ Technical Details\n\n### Built With\n- **Vanilla JavaScript**: No frameworks, pure web APIs\n- **Web Audio API**: Real-time audio analysis\n- **Canvas 2D**: High-performance graphics rendering\n- **CSS3**: Modern styling with animations and effects\n- **HTML5**: Semantic markup and audio element\n\n### Browser Compatibility\n- Chrome/Edge: Full support\n- Firefox: Full support\n- Safari: Full support (may require user interaction for audio)\n- Mobile browsers: Responsive design included\n\n### Audio Analysis\n- **FFT Size**: 256 samples for smooth visualization\n- **Frequency Data**: Real-time frequency domain analysis\n- **Time Domain**: Waveform visualization support\n- **60fps Rendering**: Smooth animations via requestAnimationFrame\n\n## 🎨 Customization\n\nThe visualizer is highly customizable through the code:\n\n### Colors\nModify the color schemes in the drawing functions:\n```javascript\nconst hue = (i / dataArray.length) * 360;\nctx.fillStyle = `hsl(${hue}, 100%, 50%)`;\n```\n\n### Effects\nAdjust glow and shadow effects:\n```javascript\nctx.shadowColor = `hsl(${hue}, 100%, 50%)`;\nctx.shadowBlur = 10;\n```\n\n### Particle System\nCustomize particle behavior in `updateAndDrawParticles()`:\n- Particle count (currently 200 max)\n- Lifetime (currently 100 frames)\n- Speed and physics\n\n## 📱 Mobile Support\n\nThe visualizer includes responsive design optimizations:\n- Touch-friendly controls\n- Optimized layouts for mobile screens\n- Gesture support for fullscreen mode\n- Performance optimizations for mobile browsers\n\n## 🔧 Development\n\n### File Structure\n```\nweb-audio-viz/\n├── index.html          # Main HTML structure\n├── styles.css          # CSS styling and animations\n├── script.js           # JavaScript audio visualizer logic\n└── README.md          # This documentation\n```\n\n### Local Development\n1. Clone the repository\n2. Open `index.html` in a web browser\n3. No build process required - pure vanilla web technologies\n\n## 🎵 Demo\n\nTry it live: [Open index.html](./index.html)\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Inspired by classic Winamp visualizations\n- Built with modern web standards\n- Designed for music lovers and developers alike\n\n---\n\n**Enjoy the visual music experience!** 🎶✨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebprofusion%2Fweb-audio-viz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebprofusion%2Fweb-audio-viz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebprofusion%2Fweb-audio-viz/lists"}