🎵 Vinyl Music Player

Turn any audio file into a vinyl-spin music video with synced lyrics — right in your browser, no upload, no install.

Live Demo · Docs · Report a Bug

---

Drop in an MP3, type the song title, add timed lyrics, click export. You get a 1080×1920 vertical MP4 (or WebM) ready for TikTok, Reels, or YouTube Shorts — other aspect ratios available too. Audio never leaves your device — the whole pipeline (decode, render, encode) runs in the browser.

Why use this

• 🎬 Real video export — Canvas + MediaRecorder to MP4 or WebM, not a screen recording
• 📝 Synced lyrics — type per-line or bulk-paste JSON; live preview as audio plays
• ✨ AI auto-sync — Whisper runs in your browser to time your lyrics (or transcribe from scratch); nothing is uploaded
• 🎨 Live vinyl preview — record spins, tonearm tracks, lyrics fade in/out
• 🔒 100% local — no servers, no uploads, no account
• 📦 Offline-ready PWA — works on the train after the first load
• ⚡ Zero install — open the demo and go

Quickstart

git clone https://github.com/koniz-dev/vinyl-music-player.git
cd vinyl-music-player
npm install
npm run dev

Open http://localhost:3000. Need more detail? See Getting Started.

ES modules require an HTTP origin — don't open index.html via file://.

Documentation

Getting Started	Install, run, first export in 60 s
Usage Guide	UI walkthrough — upload, lyrics, color, export
JSON Lyrics Format	Bulk-import spec, LRC conversion
Architecture	Modules, event bus, render pipeline
Troubleshooting	Browser matrix + fixes
Contributing	Dev workflow + code style

Tech

Vanilla HTML / CSS / JavaScript. ES modules, no build step, no backend. Uses MediaRecorder, Web Audio, Canvas, a service worker for offline support, and on-device Whisper (transformers.js + ONNX Runtime, WebGPU/WASM) for lyric auto-sync. Full breakdown in docs/architecture.md.

License

MIT © koniz-dev