What it is
SoundTheGame is a competitive music-guessing game. Players listen to a short clip of a song and race to identify the title and artist. The platform features real-time scoring, global leaderboards, and a curated track library spanning every genre — from 80s rock to modern hip-hop.
The challenge
Music trivia games either feel dated or rely on expensive licensing deals. I wanted to build a game that felt polished, fast, and genuinely fun — without the overhead of a media company. The challenge: how do you build a fair, engaging audio game entirely in the browser, with real-time competition and zero latency feel?
The approach
I built a server-side game loop using Node.js and WebSockets to synchronize game state across all players in a room. Audio clips are served from a CDN with pre-buffered segments to eliminate loading delays. The frontend uses the Web Audio API for precise clip timing and fade-ins, giving the experience a polished, native-app feel.
How it's built
The system splits into three layers: a Next.js frontend handling UI and game client logic, a Node.js/Express game server managing rooms and real-time state over WebSockets, and a PostgreSQL database storing tracks, leaderboards, and user sessions. The track library is managed via an internal admin panel built with the same stack.
What made it hard
Real-time fairness
Ensuring all players in a room hear the clip at the same moment was non-trivial. I solved this by synchronizing a server-side clock with each client and scheduling audio playback via AudioContext.currentTime, accounting for network jitter with a small adaptive buffer.
Audio licensing
Using full tracks raises copyright issues. The game uses 5-second preview clips sourced from a licensed third-party API, keeping every play legally compliant while preserving the challenge for the player.
Leaderboard at scale
Global leaderboards need to be fast and tamper-proof. I used PostgreSQL window functions with indexed queries to compute rankings server-side, avoiding client-side sorting that could be inconsistent under load.
Tools & technologies
Frontend
- Next.js 14
- TypeScript
- Tailwind CSS
- Framer Motion
- Web Audio API
Backend
- Node.js
- Express
- WebSockets (ws)
- PostgreSQL
- Prisma
Infrastructure
- Vercel
- Railway
- Cloudflare CDN
In the wild
Screenshots coming soon