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 Next.js 15 and TypeScript
- 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:
NEXT_PUBLIC_LASTFM="your_lastfm_api_key"
NEXT_PUBLIC_LASTFM_USERS="your_lastfm_username"- Start the development server:
npm run devVisit http://localhost:3000 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.
- Next.js
- TypeScript
- Tailwind CSS
- Neat (for the waves)
- MSHR
- Last.fm API
- Node Vibrant
- React Hook Form
| Variable | Description | Required |
|---|---|---|
NEXT_PUBLIC_LASTFM |
Your Last.fm API key | Yes |
NEXT_PUBLIC_LASTFM_USERS |
Default Last.fm username(s) | 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 Next.js team for the amazing framework
- All contributors and users of this project
Made with ❤️ using Next.js and the Last.FM API