Lyrics Sync
Tap along to the song and it timestamps every line.
IntermediateWeb appMedia8–18hAI-buildable 5/5no setup
Create synchronised lyrics by tapping a key as each line is sung, then refine the timings and export. Tap-to-timestamp is a lovely input mechanic, and it turns a tedious job into something almost rhythmic.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Load an audio file and paste the lyrics
- Tapping a key timestamps the current line and advances
- Timings can be nudged individually after tapping
- Playback highlights the active line in real time
- A line can be re-timed without redoing the whole song
- Export as LRC format
- Playback speed can be reduced while tapping
The interesting part
- Compensating for human tap latency consistently
- Keeping the highlight in sync with the audio clock rather than frame time
- Re-timing one line without shifting everything after it
Once it works
- Add per-word timing for karaoke
- Add waveform display to align visually
- Add automatic line detection from silence gaps
Suggested stack
reacttypescripttailwind