Music Visualizer Svelte
🎵 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.
NEW RELEASE (17/09/2025):
An improved experience of the visualizer just came out, now with online song search functionality!
Now, when you download the latest release, you will find a new search song button in the songs panel, this should allow you to look for your songs online without need of a local song file or the need to download anything, just pure streaming
Check it out: Releases
Note: You can either run the app by using docker and docker compose, or run it by executing a "npm start" command on the root folder, granted you have node on your 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
- FPS counter
- Persisted settings across sessions (via local storage)
- Release supporting online song search!
- "Load songs directly from your filesystem (server/src/songs)."
🎹 Keyboard Shortcuts
These shortcuts only trigger when Ctrl + Alt + Meta (Command/Windows) are held.
| Key | Action Description |
|---|---|
Ctrl + Shift + S |
Toggle FPS counter display |
Ctrl + Shift + ↑ |
Previous track |
Ctrl + Shift + ↓ |
Next track |
Ctrl + Shift + ← |
Previous track |
Ctrl + Shift + → |
Next track |
Ctrl + Shift + P |
Toggle play/pause of audio |
Ctrl + Shift + Space |
Toggle play/pause of audio |
Ctrl + Shift + ] |
Toggle play/pause of the animation |
Ctrl + Shift + O |
Toggle play/pause of the animation |
Ctrl + Shift + K |
Pause animation and pause music |
Ctrl + Shift + L |
Play animation and resume music |
Ctrl + Shift + F |
Toggle fullscreen mode |
Ctrl + Shift + T |
Toggle theater mode |
Ctrl + Shift + N |
Previous Theme |
Ctrl + Shift + M |
Next Theme |
Ctrl + Shift + H |
Previous Scene |
Ctrl + Shift + J |
Next Scene |
Ctrl + Shift + ; |
Previous Theme |
Ctrl + Shift + ' |
Next Theme |
Ctrl + Shift + , |
Previous Scene |
Ctrl + Shift + . |
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!
