Transcription

Displays the transcription text for a recording. Supports synchronized highlighting that follows playback in real time.

Basic usage

Link it to a recording element using the for attribute.

HTML

<fortyfour-recording
  id="rec"
  recording-id="YOUR_RECORDING_ID"
  preload="metadata"
></fortyfour-recording>

<fortyfour-transcription for="rec"></fortyfour-transcription>

The transcription text is loaded from the recording metadata. If the recording has word-level timing data, the text highlights in sync with playback.

Modes

The mode attribute controls how the text is highlighted during playback.

HTML

<fortyfour-transcription for="rec" mode="static"></fortyfour-transcription>
<fortyfour-transcription for="rec" mode="karaoke"></fortyfour-transcription>
<fortyfour-transcription for="rec" mode="subtitle"></fortyfour-transcription>
<fortyfour-transcription for="rec" mode="progressive"></fortyfour-transcription>

Mode	Description
`static`	Shows all text at once with no highlighting (default)
`karaoke`	Highlights each word as it is spoken
`subtitle`	Shows text one sentence at a time, like subtitles
`progressive`	Reveals words one by one as they are spoken

Max height

The max-height attribute sets the maximum height in pixels. If the text is longer, it becomes scrollable.

HTML

<fortyfour-transcription
  for="rec"
  max-height="120"
></fortyfour-transcription>

In karaoke mode, the component auto-scrolls to keep the current word visible.

Styling

Customize the text appearance with CSS variables.

CSS

fortyfour-transcription {
  --transcription-font-size: 14px;
  --transcription-line-height: 1.6;
  --transcription-text-color: #1a1a1a;
  --transcription-highlight-color: #c4956a;
  --transcription-muted-color: #9ca3af;
}

The highlight color is used for the currently spoken word in karaoke mode. The muted color is used for words that have not been spoken yet in progressive mode.

Reference

Attributes

Attribute	Type	Default	Description
`for`	string	required	ID of the `<fortyfour-recording>` to link to
`mode`	string	`static`	Display mode: `static`, `karaoke`, `subtitle`, `progressive`
`max-height`	number	none	Maximum height in pixels before scrolling

CSS Variables

Variable	Default	Description
`--transcription-font-size`	`14px`	Font size
`--transcription-line-height`	`1.6`	Line height
`--transcription-text-color`	`#1a1a1a`	Text color
`--transcription-highlight-color`	`#3b82f6`	Current word color (karaoke mode)
`--transcription-muted-color`	`#9ca3af`	Unspoken text color (progressive)