Speaker

$ pnpm dlx shadcn@latest add @remocn/caption-speaker

Usage

CaptionSpeaker reads the same Caption[] as every caption style, with one extra optional field per word, speaker. A page never mixes two speakers: a change of speaker always starts a new page, which then renders in that speaker's colour. Words the voice has not reached yet sit dimmed and come up to full strength as they are said.

Colours are assigned automatically in the order speakers first appear. Pin them with speakerColors so the same person keeps the same colour across videos. Words with no speaker use color. The component renders only the text block, so place it inside your own AbsoluteFill — see Positioning.

import { AbsoluteFill } from "remotion";
import { CaptionSpeaker } from "@/components/remocn/caption-speaker";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionSpeaker
      captions={captions}
      speakerColors={{ host: "#facc15", guest: "#38bdf8" }}
    />
  </AbsoluteFill>
);

Speaker labels come from diarization in your speech-to-text service. ElevenLabs Speech-to-Text with diarization turned on labels every word with a speaker_id. Convert the response with the recipe in Get a transcript, then add each word's label to the caption that starts at the same time, as speaker. Any label works — "host", "speaker_0", a name — as long as it stays the same for the same person.