srtplayer — client-side subtitle sync

[why]

subtitle sync needs precision. you need to hear the audio, see the waveform, and read the subtitles at the same time — all locally, no uploads, no cloud.

most players are either bloated desktop apps or require uploading your files to someone else's server. wanted something dead simple: open a browser, drop your files, done.

[what it does]

→ plays audio with waveform visualization (wavesurfer.js)
→ loads .srt subtitle files, syncs display with playback
→ click any subtitle segment to jump to that timestamp
→ click waveform to seek to any position
→ speed control (0.5x to 2x)
→ per-input clear buttons — clear audio or SRT without resetting player
→ waveform hover tooltip for precise seeking
→ single HTML file, fully offline

[the refactor]

applied NASA/JPL Power of 10 rules to a browser JS app. the results:

before          after
─────────────   ─────────────
0 assertions    13 assert() calls
0 guards        7 guardWaveSurfer() functions
anonymous       named event handlers
no loop bounds  MAX_SRT_BLOCKS = 10000
global state    centralized state object
no XSS check    escapeHTML() on all subtitle text

every DOM query validated. every user input escaped. every function under 60 lines. strict mode everywhere.

[terminal aesthetic]

rebuilt the entire UI from scratch to match the portfolio. no color, no gradients, no rounded corners.

→ Geist Mono font (bundled, 71KB woff2)
→ monochrome wavesurfer: waveColor #ccc, progressColor #000
→ bracket sections: [input], [player], [subtitles]
→ arrow prefixes: audio →, srt →
→ dimmed comments: // select files to begin
→ text-only buttons: play [▶], stop [■]

[the pipeline]

two tools, one workflow:

gcolab-whisper → audio in, .srt out
srtplayer     → audio + .srt, synced playback

transcribe on colab. play back locally. no cloud uploads, no API keys, no subscriptions.

[stats]

→ 1 file, ~660 lines
→ 38 named functions
→ 13 assertion calls
→ 7 guard functions
→ 0 external dependencies (wavesurfer bundled)
→ 0 localStorage usage

[credits]

→ wavesurfer.js — audio visualization engine
→ JFK/voicesrt — the GOAT. full-featured SRT editor with transcription, waveform, speaker management

github repo →

try it live →

gcolab-whisper → // generate .srt files with AI transcription