Whisper Live Captioning Demo
Accessible HTML Presentation with Real-Time Transcription
A template for creating presentations with live captions using Whisper.cppStandalone presentation template demonstrating Whisper.cpp integration for live captioning.
Caption Listener Status
The widget below checks if the transcript file is available. If Whisper is running, you’ll see a green button. If not, a help link appears with setup instructions.
How to Start the Caption Listener
- Open a terminal in your project root.
- Set
WHISPER_BINandWHISPER_MODELenvironment variables if needed. - Run
npm run dev:whisperto start the caption listener and transcript writer. - Reload this page. The green button will appear when the transcript is available.
If you prefer, you can use npm run dev:transcript to mirror a text file to JSON instead.
Setup (Local Only)
- Live captioning only works when running locally (not on GitHub Pages)
- Point the iframe at a local demo page (gitignored)
- Write transcript JSON to
/whisper-demo/transcript.json - Use provided helper to launch Whisper or mirror output
Why local only? Whisper.cpp requires a compiled binary with microphone access and file system writes - not possible with static hosting.
Runner: npm run dev:whisper (configure with WHISPER_BIN & WHISPER_MODEL)
Watcher alternative: npm run dev:transcript to mirror transcript.txt to JSON
Demo Iframe
If the demo doesn't load, open it directly: whisper-demo/index.html
Iframe can be replaced with a hosted demo URL if preferred.
Live Transcript
Polling /presentations/whisper-demo/transcript.json every second.
Deck-side polling decouples transcript from iframe implementation.
Combined
Demo
Transcript
Separate element ID to allow multi-box polling later, if needed.