Transcribe audio to SRT subtitles in the browser with Whisper (no upload, no server)
You can run Whisper inside a web page today. The audio file never leaves the visitor's computer: the browser downloads the speech model once, caches it, and does the listening itself. No server, no API key, no per-minute bill. This post shows how to build it with Transformers.js: a Web Worker, WebGPU with a WASM fallback, long files in blocks, and SRT/VTT output. It also covers the three things…
1. Whisper can now be run inside a web page without uploading audio files or using a server. The browser downloads the speech model once, caches it, and processes the audio locally. This eliminates the need for an API key or per-minute billing.
2. To achieve this, the audio file is first decoded to 16 kHz mono using the Web Audio API, which supports various audio formats like MP3, M4A, WAV, OGG, and FLAC. The decoded audio is then processed in a Web Worker to avoid blocking the main thread.
3. The speech-to-text model is loaded in a separate Web Worker, with a preference for WebGPU if available. If not, it falls back to WASM. The model size can be adjusted based on factors like speech clarity, accents, noise, and language. The default model is whisper-tiny, while base and small offer better performance with accents, noise, and multilingual support.
4. Long audio files are processed in smaller blocks to improve user experience. The code breaks the audio into 90-second segments, shifts each block's timestamps accordingly, and sends partial results back to the main thread as they are generated. This allows the page to display progress updates in real-time without waiting for the entire transcription to complete.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
