Transcribing Video in the Browser Without Uploading the Film

王俊俊 — Fri, 09 Oct 2026 23:03:59 +0000

I needed timed subtitles for language study videos that already lived on my disk. Uploading a two-hour lecture to a transcription SaaS felt wrong for privacy and for bandwidth. The shape that worked was: keep the media element local, demux audio in the browser, and send only short mono chunks to a Worker.

The constraint

Playback stays in the page. Local files and direct links (MP4, WebM, HLS) go straight into a <video> / media element. A signed-out library can live in IndexedDB. Sign-in can sync library metadata and subtitle tracks; the film itself never becomes an upload.

That split forces the transcription path to be audio-only.

Chunked audio instead of a full upload

When a file has no usable subtitles, the client:

Demuxes audio in the browser
Skips long silences when possible
Encodes short 16 kHz mono segments (roughly 20â€“30 seconds)
POSTs each chunk to a Cloudflare Worker

The Worker runs speech-to-text (Workers AI / Whisper-class model), returns timed text, and the client turns that into cues. Existing SRT, VTT, and ASS imports follow the same cue model, so "I already have subtitles" and "generate them" share one player.

Keeping requests small matters more than clever batching. Failed chunks retry without restarting a multi-gigabyte upload.

Why a Worker on the same host helps

A single host serving the Vue app and the API avoids CORS theater for cookie/session flows and keeps the mental model simple: one origin for the player shell. Hono on a Worker is enough for auth, credit accounting, and the STT proxy.

The learning loop is the product

None of the model work matters if seeking is clumsy. The UI unit is a subtitle cue: previous / next, replay, loop one line, or loop an Aâ€“B range. Bilingual cues sit on the video. Word lookup opens against that sentence, not a generic dictionary homepage.

If you study from files you already have, that architecture is what I shipped in LangScribe local playback, optional AI captions, and a player built around the line you are trying to hear.

I built a language-learning player

王俊俊 — Fri, 09 Oct 2026 13:32:27 +0000

I wanted the thing I actually do when I study: open a lecture or a show, see the line in two languages, hit replay until the sentence sticks, and click a word I do not know. Desktop players can do pieces of this. Most of them also want an install, a GPU stack, and an API key before the first video plays.

So I built LangScribe as a website. The interesting constraint was privacy: the video file should stay on the machine. Subtitles and a library can sync. The film should not.

What runs where

The app is one Vue 3 frontend. A Cloudflare Worker (Hono) serves the built site and the API on the same host, so the player and the account API are not two deployments.

Playback never leaves the browser. Local files and direct links (MP4, WebM, HLS) are handed to the media element. A signed-out library lives in IndexedDB. Sign in with Google and the library plus subtitle tracks sync; the video file still does not get uploaded.

That split is the whole product. Guest mode has to be useful. Cloud mode has to be optional.

Subtitles without shipping the film

If a video has no subtitles, the browser demuxes the audio, skips silence, and uploads short 16 kHz mono chunks, about 20–30 seconds each. Speech-to-text is Cloudflare Workers AI, Whisper large-v3-turbo. The worker returns timed text; the client turns that into cues and can export SRT. Existing SRT, VTT, and ASS files import the same way.

I did not want a second "upload your course to our servers" step. Chunked audio is enough for transcription, and it keeps the request small.

Translation that can see the previous line

Free translation works without an account, line by line, as you watch.

AI translation is the path that cares about context. Lines go up in small batches with a few preceding subtitle pairs, to a Llama 3.3 70B model on Workers AI. A batch that fails to parse falls back to single-line calls. The player only asks for lines near the playhead, then refills when you are about to run out of translated text. Word lookup is a separate, cached call: part of speech, a short explanation in that sentence, pronunciation.

Credits apply to AI subtitles, AI translation, and AI lookups. Free translation does not. The server records usage; the page does not decide that a feature is free.

The player loop

None of the model work matters if seeking feels clumsy. The UI is built around the cue list: previous line, next line, replay, loop one line, or loop an A–B range. Bilingual cues sit on the video. Click a word and the card opens on that sentence, not on a dictionary homepage.

That is the architecture I would keep if I rewrote the UI: local media, optional account, audio-only transcription, translation with a little context, and a player that treats a subtitle line as the unit of study.

If you learn from video, you can try it at LangScribe.

DEV Community: 王俊俊