An open-source music-themed party game where players arrange songs in chronological order based on their release dates.
TuneTap is a web-based music knowledge game that challenges players to arrange songs from their favorite Spotify playlists in chronological order. Players listen to songs and must correctly place them on a timeline based on when they were first released.
- 🎵 Spotify Integration: Load any public Spotify playlist to create your game
- 📅 Release Date Lookup: Automatically fetches first release dates from MusicBrainz
- 🎧 Audio Playback: Plays audio previews from Spotify or YouTube
- 💾 Smart Caching: Caches release dates in SQLite for faster subsequent lookups
- ⚡ Queue System: Efficiently handles MusicBrainz API rate limits with a queue system
- 🌙 Dark Mode: Beautiful dark theme with smooth animations
- 📱 Responsive: Works on desktop and mobile devices
- Node.js 18+ and npm/pnpm/yarn
- A Spotify account (for playlist URLs)
- SQLite (included with Node.js)
- Clone the repository:
git clone https://github.com/yourusername/tunetap-alpha.git
cd tunetap-alpha- Install dependencies:
npm install
# or
pnpm install
# or
yarn install- Set up the database:
npx prisma generate
npx prisma migrate dev- Create a
.envfile (optional - defaults work for development):
DATABASE_URL="file:./dev.db"- Start the development server:
npm run dev- Open http://localhost:5173 in your browser
- Start the Game: Click "Start Game" on the homepage
- Load a Playlist: Paste a public Spotify playlist URL (e.g.,
https://open.spotify.com/playlist/...) - Wait for Processing: The app will fetch tracks, find audio sources, and look up release dates
- Play & Arrange: Listen to songs and arrange them in chronological order based on their release dates
- Win: Be the first to correctly place all songs in order!
Currently, TuneTap supports a basic mode where you can:
- Listen to tracks from your playlist
- View release dates as they're fetched
- Arrange tracks chronologically
Future game modes:
- Original Mode: Guess if a song was released before or after other songs
- Expert Mode: Name the artist, song title, and exact release year
- Framework: SvelteKit with Svelte 5
- Language: TypeScript
- Styling: Tailwind CSS
- Database: SQLite with Prisma
- UI Components: Custom components built with bits-ui
- State Management: Runed (Svelte 5 runes utilities)
- Music APIs:
- Spotify URL Info - Fetch playlist tracks
- YouTube SR - Find YouTube audio sources
- MusicBrainz API - Look up release dates
tunetap-alpha/
├── src/
│ ├── lib/
│ │ ├── components/ # Reusable UI components
│ │ ├── server/ # Server-side utilities
│ │ └── types.ts # TypeScript type definitions
│ ├── routes/
│ │ ├── +page.svelte # Homepage
│ │ ├── playlist/ # Playlist input page
│ │ └── game/ # Game page
│ └── app.css # Global styles
├── prisma/
│ └── schema.prisma # Database schema
└── static/ # Static assets
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run check- Run type checkingnpm run lint- Lint codenpm run format- Format code with Prettier
# Create a new migration
npx prisma migrate dev --name migration_name
# View database in Prisma Studio
npx prisma studio
# Reset database (development only)
npx prisma migrate resetTuneTap uses SQLite to cache data for performance optimization. The database stores:
Release Date Cache (ReleaseDateCache):
- Track name and artist name
- Release date (YYYY-MM-DD format) or null if not found
- Timestamps for cache management
Playlist Cache (SpotifyPlaylistCache):
- Playlist URL (as primary key)
- Serialized JSON of all tracks in the playlist
- Timestamps for cache invalidation
Audio Source Cache (AudioSourceCache):
- Track name and artist name
- Audio URLs (YouTube or Spotify preview URLs)
- Cover image URLs
- Status ('found' or 'missing')
This caching system significantly reduces API calls for repeated tracks and playlists, making subsequent game setups much faster.
To respect MusicBrainz API rate limits, TuneTap implements a queue system that:
- Processes release date lookups sequentially
- Shows queue size in real-time
- Handles errors gracefully
- Provides progress feedback
The queue ensures the app stays within MusicBrainz's rate limits while providing a smooth user experience.
Game state is automatically saved to browser sessionStorage and persists for up to 24 hours. This allows you to:
- Refresh the page without losing progress
- Navigate between pages and return to your game
- Resume gameplay after closing the browser tab
Note: Session data is stored locally in your browser and is not synced across devices.
TuneTap tries multiple sources for audio playback:
- Spotify preview URLs (30-second previews)
- YouTube videos (full songs when available)
Important: TuneTap uses a streaming architecture - it does not download or save audio files to disk. The app only caches:
- URLs (Spotify preview URLs, YouTube links)
- Metadata (track names, artist names, release dates, cover image URLs)
- Game state (temporarily in browser sessionStorage for up to 24 hours)
All audio is streamed directly from external sources (Spotify/YouTube) when played. This approach:
- Respects copyright and licensing
- Minimizes storage requirements
- Keeps the app lightweight and fast
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source. Please add your license information here (e.g., MIT, Apache 2.0, etc.).
- No user accounts: TuneTap doesn't require registration or login
- Local storage only: All data (caches, game state) is stored locally
- No audio files: Only URLs and metadata are cached - no copyrighted content is stored
- Session-based: Game state persists only in your browser's sessionStorage (24-hour limit)
- Open source: You can review all code to verify privacy practices
- Built with amazing open-source tools (Svelte, SvelteKit, Prisma, etc.)
- Music data provided by MusicBrainz
- Audio streaming via Spotify and YouTube APIs
- Key dependencies:
- spotify-url-info - Playlist fetching
- youtube-sr - YouTube audio source discovery
- Runed - Svelte 5 runes utilities
- bits-ui - Accessible UI components
- Issues: GitHub Issues
- Discussions: GitHub Discussions