How prajasw/musi-type works
musi-type lets users choose a YouTube video, retrieve or supply lyrics, obtain usable line timings, then type along while the video is synchronized to their progress. The backend gathers metadata, captions, and lyric sources; it prefers synced lyrics, otherwise aligns plain lyrics to captions or optional Whisper audio timings. The React client handles playback, typing modes, scoring, settings, and results. The graph reflects README-documented capabilities as well as sampled imports and calls; some unsampled UI and backend details are represented only at subsystem level.
Main entry points: Watch.tsx Watch session · services/song.ts Song resolution · audio.ts Audio transcription sync · routes/song.ts Song and sync routes
Components 24
Web experience
- Song selection
web/src/pages/Home.tsx - Watch session
web/src/pages/Watch.tsx - Video player
web/src/hooks/useYouTubePlayer.ts - Typing session
web/src/hooks/useTyping.ts - Typing rules and scoring
web/src/lib/typing.ts - Typing display
web/src/components/TypingArea.tsx - Session results
web/src/components/Results.tsx - On-screen keyboard
web/src/components/Keyboard.tsx - Settings and themes
web/src/lib/settings.tsx
Lyrics and timing
- Song resolution
server/src/services/song.ts - Lyric alignment
server/src/align/align.ts - Caption parsing
server/src/services/captions.ts - Audio transcription sync
server/src/services/audio.ts
API and controls
- API client
web/src/lib/api.ts - Song and sync routes
server/src/routes/song.ts - HTTP application
server/src/app.ts - Song and audio cache
server/src/cache.ts
External sources
- YouTube video
- Video metadata and captions
server/src/services/ytdlp.ts - LRCLIB lyrics
server/src/services/lrclib.ts - Genius lyrics
server/src/services/genius.ts - Whisper transcription
server/scripts/transcribe.py - YouTube API / yt-dlp
Other components
- Listener / typist
Connections 31
- Listener / typist → Song selection: chooses video
- Song selection → API client: requests song
web/src/pages/Home.tsx - Listener / typist → Watch session: types lyrics
- Watch session → API client: fetches or aligns
web/src/pages/Watch.tsx - API client → Song and sync routes: calls API
- HTTP application → Song and sync routes: routes requests
server/src/app.ts - Song and sync routes → Song resolution: resolves lyrics
server/src/routes/song.ts - Song and sync routes → Audio transcription sync: starts audio sync
server/src/routes/song.ts - Song resolution → Video metadata and captions: gets metadata and captions
server/src/services/song.ts - Song resolution → LRCLIB lyrics: fetches lyrics
server/src/services/song.ts - Song resolution → Genius lyrics: fetches fallback lyrics
server/src/services/song.ts - Song resolution → Lyric alignment: aligns lyric words
server/src/services/song.ts - Song resolution → Audio transcription sync: reads audio timings
server/src/services/song.ts - Song resolution → Song and audio cache: reads and writes
server/src/services/song.ts - Audio transcription sync → Song and audio cache: stores timings
server/src/services/audio.ts - Video metadata and captions → Caption parsing: parses tracks
server/src/services/ytdlp.ts - Video metadata and captions → YouTube API / yt-dlp: gets video data
server/src/services/ytdlp.ts - Audio transcription sync → Video metadata and captions: downloads audio
server/src/services/audio.ts - Audio transcription sync → Whisper transcription: transcribes audio
- LRCLIB lyrics → YouTube API / yt-dlp: none
- Watch session → Video player: controls playback
web/src/pages/Watch.tsx - Video player → YouTube video: plays video
web/src/hooks/useYouTubePlayer.ts - Watch session → Typing session: runs session
web/src/pages/Watch.tsx - Typing session → Typing rules and scoring: uses reducer and scoring
web/src/hooks/useTyping.ts - Watch session → Typing display: renders lyrics
web/src/pages/Watch.tsx - Watch session → On-screen keyboard: renders keymap
web/src/pages/Watch.tsx - Watch session → Session results: shows results
web/src/pages/Watch.tsx - Typing session → Session results: provides session stats
web/src/components/Results.tsx - Watch session → Settings and themes: applies preferences
web/src/pages/Watch.tsx - Listener / typist → Settings and themes: sets typing options
- Watch session → Video player: holds or advances
web/src/pages/Watch.tsx