Generate beautiful animated wave visualizations from your Last.fm scrobbles in real-time. This can be used as a dynamic wallpaper or a visualizer for your music player.
- 🎵 Real-time Last.fm scrobble visualization
- 🌈 Dynamic color gradients based on album artwork
- 🎨 Two visualization modes:
- Standard waves with dynamic colors
- Optimized performance mode for smoother animations
- 🌗 Adaptive favicon that matches your current track
- 📱 Fully responsive design
- 🚀 Built with SvelteKit 2 and Svelte 5
- Node.js 18.0 or higher
- A Last.fm API key (Get one here)
- A Last.fm account
- Clone the repository:
git clone https://github.com/yourusername/waves-fm.git
cd waves-fm- Install dependencies:
npm install- Create a
.envfile in the root directory:
LASTFM_API_KEY="your_lastfm_api_key"
LASTFM_USERNAME="your_lastfm_username"- Start the development server:
npm run devVisit http://localhost:5173 to see your visualization!
- Visit the homepage
- Enter your Last.fm API key and username
- Toggle the "Use Optimized Version" switch if you want better performance
- Click "View Visualizer" to see your current track visualization
Note, you can just go to /optimized-waves or /waves to see the visualizer directly using the api key added to the env.
- SvelteKit
- Svelte 5
- TypeScript
- Tailwind CSS
- Neat (for the waves)
- Last.fm API
- Bits UI
- ColorThief
| Variable | Description | Required |
|---|---|---|
LASTFM_API_KEY |
Your Last.fm API key | Yes |
LASTFM_USERNAME |
Default Last.fm username | No |
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Last.fm for their excellent API
- The SvelteKit team for the amazing framework
- All contributors and users of this project
Made with ❤️ using SvelteKit and the Last.FM API