Chapter 669: createTikTokStyleCaptions()

Core Idea

Using this function, you can segment tokens to create "pages" of captions, as commonly seen on TikTok videos.

Key Concepts

• API
• captions
• combineTokensWithinMilliseconds
• breakOnSilenceAfterMilliseconds?<AvailableFrom v="4.0.514" />
• Return value
• pages
• Whitespace sensitivity
• See also

Code Examples

const captions: Caption[] = [
  {
    text: 'Using',
    startMs: 40,
    endMs: 300,
    timestampMs: 200,
    confidence: null,
  },
  {
    text: " Remotion's",
    startMs: 300,
    endMs: 900,
    timestampMs: 440,
    confidence: null,
  },
  {
    text: ' TikTok',
    startMs: 900,
    endMs: 1260,
    timestampMs: 1080,
    confidence: null,
  },
  {
    text: ' template,',
    startMs: 1260,
    endMs: 1950,
    timestampMs: 1600,
    confidence: null,
  },
];

const {pages} = createTikTokStyleCaptions({
  captions,
  combineTokensWithinMilliseconds: 1200,
});

/* pages: [
  {
    text: "Using Remotion's",
    startMs: 40,
    durationMs: 860,
    tokens: [
      {
        text: 'Using',
        fromMs: 40,
        toMs: 300,
      },
      {
        text: " Remotion's",
        fromMs: 300,
        toMs: 900,
      },
    ],
  },
  {
    text: 'TikTok template,',
    startMs: 900,
    durationMs: 1050,
    tokens: [
      {
        text: 'TikTok',
        fromMs: 900,
        toMs: 1260,
      },
      {
        text: ' template,',
        fromMs: 1260,
        toMs: 1950,
      },
    ],
  }
] */

• What it demonstrates: Usage pattern for createTikTokStyleCaptions() from the official docs.

Key Takeaways

1. Understand api when working with createTikTokStyleCaptions().
2. Understand captions when working with createTikTokStyleCaptions().
3. Understand combinetokenswithinmilliseconds when working with createTikTokStyleCaptions().
4. Understand breakonsilenceaftermilliseconds?<availablefrom v="4.0.514" /> when working with createTikTokStyleCaptions().
5. Understand return value when working with createTikTokStyleCaptions().

Connects To

• api: related page in the Captions (@remotion/captions) section.
• Caption: related page in the Captions (@remotion/captions) section.
• Displaying: related page in the Captions (@remotion/captions) section.