Captions

The caption editor puts the video, the list of captions and a timeline over the sound's waveform side by side. Drag a caption's edges on the timeline, or set them from the keyboard as the video plays; split, merge, shift and re-sync a whole file; mark who is speaking.

Every caption is checked against the rules you choose — characters per line, lines, reading speed, shortest and longest time on screen, gaps — and overlaps, short captions and long lines can be fixed in one step. Plain text becomes timed captions, spread over the speech it finds in the sound. Out as WebVTT, SRT, JSON or a transcript.

Cleaning up a first draft

A quick first transcription of a safety induction, with the faults it usually has: an overlap, a caption too short to read, long lines and two captions run together. Choose Fix automatically in the editor, then split and re-time what is left. Choose other rules in the editor's toolbar to see the same captions judged by another standard.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-caption-editor id="ce-draft" label="Induction captions" src="assets/media/induction.mp4" poster="assets/media/induction-poster.jpg" language="en" speakers="Narrator, Priya" file-name="induction" style="inline-size: 100%; --bmx-caption-editor-height: 18rem"></bmx-caption-editor>

From a transcript to timed captions

Paste what was said, as plain text, and the editor cuts it into captions that keep to the rules and spreads them over the stretches of speech in the sound. Then fine-tune the timing on the timeline.

Make timed captions

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-textarea id="ce-text" label="What was said" rows="5" style="inline-size: 100%"></bmx-textarea>
<bmx-caption-editor id="ce-timed" label="Timed from the transcript" src="assets/media/induction.mp4" language="en" file-name="induction-timed" style="inline-size: 100%; --bmx-caption-editor-height: 16rem"></bmx-caption-editor>

Out in every format

The draft above as each file your player or platform takes. The same reading, checking and fixing runs on a server, for captions arriving in bulk.

WebVTT

SRT

JSON

Transcript

// Node 18 or later: the caption engine, from the Gold package.
import { parseCaptions, captionRules, checkCues, fixCues, writeVtt } from './dist/node/bmx-caption-editor.mjs';

const rules = captionRules('broadcast');
for (const name of await readdir('incoming')) {
  const cues = parseCaptions(await readFile(`incoming/${name}`, 'utf8'));
  const fixed = fixCues(cues, rules).cues;
  const left = checkCues(fixed, rules);
  if (left.length) console.log(name, left.map(p => `${p.kind} in caption ${p.index + 1}`));
  await writeFile(`ready/${name.replace(/\.\w+$/, '.vtt')}`, writeVtt(fixed));
}