🎵 Svelte + Three JS Song Visualizer - V.1
Welcome to the Three JS Song Visualizer (with Svelte), a dynamic and theme-driven audio visualization project now entering its Version 1 milestone. This initial phase introduces foundational functionality focused on delivering a visually engaging experience while maintaining responsive keyboard interaction and support for customized aesthetic themes.
The visualizer is designed to work in sync with audio playback, allowing users to manipulate the playback and animation with precision, thanks to an intuitive keyboard command system.
🚀 Features
- Real-time audio visualization
- Theme support with user-defined color palettes
- Fullscreen and theater display modes
- Play, pause, next song & previous song buttons
- Volume range
- Animation control (more coming in V.2!)
- FPS counter
- Persisted settings across sessions (via local storage)
🎹 Keyboard Shortcuts
These shortcuts only trigger when Ctrl + Alt + Meta (Command/Windows) are held.
| Key | Action Description |
|---|---|
Ctrl + Alt + ⌘ + S |
Toggle FPS counter display |
Ctrl + Alt + ⌘ + ↑ |
Previous track |
Ctrl + Alt + ⌘ + ↓ |
Next track |
Ctrl + Alt + ⌘ + ← |
Previous track |
Ctrl + Alt + ⌘ + → |
Next track |
Ctrl + Alt + ⌘ + P |
Toggle play/pause of audio |
Ctrl + Alt + ⌘ + Space |
Toggle play/pause of audio |
Ctrl + Alt + ⌘ + ] |
Toggle play/pause of the animation |
Ctrl + Alt + ⌘ + O |
Toggle play/pause of the animation |
Ctrl + Alt + ⌘ + K |
Pause animation and pause music |
Ctrl + Alt + ⌘ + L |
Play animation and resume music |
Ctrl + Alt + ⌘ + F |
Toggle fullscreen mode |
Ctrl + Alt + ⌘ + T |
Toggle theater mode |
Ctrl + Alt + ⌘ + N |
Previous Theme |
Ctrl + Alt + ⌘ + M |
Next Theme |
Ctrl + Alt + ⌘ + H |
Previous Scene |
Ctrl + Alt + ⌘ + J |
Next Scene |
Ctrl + Alt + ⌘ + ; |
Previous Theme |
Ctrl + Alt + ⌘ + ' |
Next Theme |
Ctrl + Alt + ⌘ + , |
Previous Scene |
Ctrl + Alt + ⌘ + . |
Next Scene |
🖌 Theme Support
The visualizer supports custom themes, allowing users to personalize their viewing experience. These themes influence the color palette of the visualization, including elements like bars, background, and color transitions. Themes are saved and persisted across sessions.
📦 Version Info
- Version: 1.0.0
- Status: First phase released
- Upcoming: Shader support, more prefabricated scenes, deeper customization for scene properties.
Stay tuned for updates and enhancements as I continue to evolve this visual experience.
And thank you for your attention!
