https://github.com/koniz-dev/vinyl-music-player
A product from the Musical Universe
https://github.com/koniz-dev/vinyl-music-player
canvas-api color-customization content-creation creative-tools drag-and-drop event-driven javascript lyrics-sync modular-architecture music-player music-visualization progressive-web-app state-management video-export video-generation vinyl-players web-audio-api
Last synced: 2 days ago
JSON representation
A product from the Musical Universe
- Host: GitHub
- URL: https://github.com/koniz-dev/vinyl-music-player
- Owner: koniz-dev
- Created: 2025-09-08T03:36:55.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2026-06-02T09:14:36.000Z (about 1 month ago)
- Last Synced: 2026-06-02T09:18:51.555Z (about 1 month ago)
- Topics: canvas-api, color-customization, content-creation, creative-tools, drag-and-drop, event-driven, javascript, lyrics-sync, modular-architecture, music-player, music-visualization, progressive-web-app, state-management, video-export, video-generation, vinyl-players, web-audio-api
- Language: JavaScript
- Homepage: https://koniz-dev.github.io/vinyl-music-player/
- Size: 212 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎵 Vinyl Music Player
> Turn any audio file into a vinyl-spin music video with synced lyrics — **right in your browser**, no upload, no install.
[](https://koniz-dev.github.io/vinyl-music-player/)
[](LICENSE)
[](docs/architecture.md#pwa--offline)
[](docs/architecture.md#why-no-build-step)
**[Live Demo](https://koniz-dev.github.io/vinyl-music-player/)** · **[Docs](docs/)** · **[Report a Bug](https://github.com/koniz-dev/vinyl-music-player/issues)**
---
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](https://koniz-dev.github.io/vinyl-music-player/) and go
## Quickstart
```bash
git clone https://github.com/koniz-dev/vinyl-music-player.git
cd vinyl-music-player
npm install
npm run dev
```
Open . Need more detail? See [Getting Started](docs/getting-started.md).
> ES modules require an HTTP origin — don't open `index.html` via `file://`.
## Documentation
| | |
|---|---|
| [Getting Started](docs/getting-started.md) | Install, run, first export in 60 s |
| [Usage Guide](docs/usage.md) | UI walkthrough — upload, lyrics, color, export |
| [JSON Lyrics Format](docs/json-lyrics-format.md) | Bulk-import spec, LRC conversion |
| [Architecture](docs/architecture.md) | Modules, event bus, render pipeline |
| [Troubleshooting](docs/troubleshooting.md) | Browser matrix + fixes |
| [Contributing](docs/contributing.md) | 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](docs/architecture.md).
## License
[MIT](LICENSE) © [koniz-dev](https://github.com/koniz-dev)