+
Skip to content

tvillarete/ipod-classic-js

Repository files navigation

ipod_og

🎵 iPod.js

A nostalgic music player that bridges the gap between classic iPod design and modern streaming

Vercel Next.js React TypeScript

Created by Tanner VillareteLinkedInWebsite


🌟 About

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.

ipod

Experience the nostalgia with modern streaming power


✨ Features

🎵 Music Streaming

  • Spotify Web Playback SDK integration
  • Apple Music via MusicKit JS
  • Full playback controls (play, pause, skip, seek)
  • Browse artists, albums, playlists
  • Search functionality

🎮 Interactive Experience

  • Authentic iPod click wheel navigation
  • Multiple device themes (Silver, Black, U2 Edition)
  • Built-in games (Brick)
  • Smooth animations with Framer Motion
  • Responsive design

🛠 Modern Tech Stack

  • Next.js 14 with App Router
  • React 18 with TypeScript
  • Styled Components 6 for styling
  • Framer Motion 10 for animations
  • Deployed on Vercel

🎨 Design

  • Pixel-perfect iPod Classic recreation
  • All SVGs hand-crafted in Figma
  • Authentic UI/UX down to the smallest details
  • Dark/Light mode support
  • Customizable themes

🚀 Quick Start

Prerequisites

  • Node.js (version specified in .nvmrc)
  • Yarn package manager
  • Vercel CLI (optional, for deployment)

Installation

# 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! ✨


⚙️ Configuration

Environment Variables

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

🎵 Spotify Setup

  1. Create a Spotify app in the Spotify Developer Dashboard
  2. Add http://localhost:3000 to your app's redirect URIs
  3. Copy your Client ID and Client Secret

📚 Spotify Web Playback SDK Documentation

🍎 Apple Music Setup

  1. Join the Apple Developer Program
  2. Create a MusicKit identifier in the Apple Developer Portal
  3. Generate a private key for MusicKit
  4. 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


🎯 Usage

Navigation

  • Click Wheel: Scroll through menus
  • Center Button: Select items
  • Menu Button: Go back
  • Play/Pause: Control playback
  • Forward/Back: Skip tracks

Music Services

  1. Go to SettingsChoose Service
  2. Select Spotify or Apple Music
  3. Sign in with your account
  4. Start exploring your music!

Themes

  • Silver: Classic iPod look
  • Black: Sleek modern variant
  • U2 Edition: Special red and black design

🤝 Contributing

Contributions are welcome! This project is built to be highly extensible.

Ideas for Contributions

  • 🎮 New games and apps
  • 🎨 Additional themes
  • 🔧 Performance improvements
  • 🐛 Bug fixes
  • 📱 Mobile optimizations

📄 License

This project is open source and available under the MIT License.


Made with ❤️ by Tanner Villarete

Bringing back the magic of the iPod Classic, one click at a time

GitHub stars GitHub forks

About

An iPod Classic simulator that connects to Apple Music and Spotify. Built with React & Styled Components

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 7

Languages

点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载