captions.js

Animated captions from Deepgram transcripts

Feed a Deepgram pre-recorded response straight into captions.js: word timings, sentences and paragraphs, rendered as animated captions.

captions.js reads a Deepgram pre-recorded transcription response as is. toCaptions() detects it and returns timed words; getParagraphs() returns the paragraph structure when Deepgram provides it.

1. Transcribe with Deepgram

Ask for word timings with punctuation and paragraphs:

curl -X POST "https://api.deepgram.com/v1/listen?model=nova-3&smart_format=true&paragraphs=true" \
  -H "Authorization: Token $DEEPGRAM_API_KEY" \
  -H "Content-Type: video/mp4" \
  --data-binary @talk.mp4 \
  -o deepgram.json

Keep the API key on your server; never ship it to the browser.

2. Render in the browser

import captionsjs, { getPreset, toCaptions } from "captions.js";

const response = await fetch("/deepgram.json").then((r) => r.json());

captionsjs({
  video: document.querySelector("video")!,
  preset: getPreset("Focus Box"),
  captions: toCaptions(response), // Deepgram response → [{ word, startTime, endTime, … }]
});

3. Or burn it into an MP4

npx captions.js burn talk.mp4 deepgram.json --preset "Focus Box"

The server package accepts the same Deepgram file. Options and Docker usage: Animated captions with FFmpeg in Node.js.

Notes

  • smart_format=true gives you punctuated words, which read better on screen.
  • Other providers (AssemblyAI, ElevenLabs, Gladia…) work too: map their words to { word, startTime, endTime } in seconds, the same way as in the Whisper guide.

For AI agents and LLMs: this page as Markdown · llms.txt · all docs in one file