A nostalgic music player that bridges the gap between classic iPod design and modern streaming
Created by Tanner Villarete • LinkedIn • Website
Before the days of streaming services, we relied on physical devices to store our limited libraries of music. Now with the streaming age, we no longer rely on physical storage and have endless hours of songs at our disposal. This project is an homage to the good 'ol days. A mix of the old and new. Experience the iPod Classic you used to own that now connects to Spotify and Apple Music — the two most popular music streaming platforms in the world.
iPod.js recreates the iconic iPod Classic experience in your browser, complete with the signature click wheel navigation and that satisfying tactile feel (Android only) — but now powered by Spotify and Apple Music, giving you access to millions of songs.
Built with extensibility in mind, this isn't just a music player. It can run games (like the classic Brick game!), and there's room for many more apps and easter eggs in the future.
|
|
|
|
- Node.js (version specified in
.nvmrc
) - Yarn package manager
- Vercel CLI (optional, for deployment)
# Use the recommended Node version
nvm use
# Install dependencies
yarn install
# Start development server
yarn dev
Visit http://localhost:3000/ipod to experience the magic! ✨
Create a .env.local
file in your project root:
# Spotify Configuration
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
# Apple Music Configuration
APPLE_DEVELOPER_TOKEN=your_apple_developer_token
- Create a Spotify app in the Spotify Developer Dashboard
- Add
http://localhost:3000
to your app's redirect URIs - Copy your Client ID and Client Secret
📚 Spotify Web Playback SDK Documentation
- Join the Apple Developer Program
- Create a MusicKit identifier in the Apple Developer Portal
- Generate a private key for MusicKit
- Create a developer token (JWT)
💡 Need help generating Apple Music JWTs? Check out the Apple Music JWT Generator — a helpful tool I created to simplify the JWT creation process
📚 Apple MusicKit JS Documentation
📚 Getting Keys and Creating Tokens Guide
- Click Wheel: Scroll through menus
- Center Button: Select items
- Menu Button: Go back
- Play/Pause: Control playback
- Forward/Back: Skip tracks
- Go to Settings → Choose Service
- Select Spotify or Apple Music
- Sign in with your account
- Start exploring your music!
- Silver: Classic iPod look
- Black: Sleek modern variant
- U2 Edition: Special red and black design
Contributions are welcome! This project is built to be highly extensible.
- 🎮 New games and apps
- 🎨 Additional themes
- 🔧 Performance improvements
- 🐛 Bug fixes
- 📱 Mobile optimizations
This project is open source and available under the MIT License.