Transcription

Interactive, time-synced transcript segments with click-to-seek — render-props root plus styled segment buttons.

Synced playback

Play the audio and watch segments highlight by currentTime. Click a word to seek via onSeek.

Loading…

Installation

CLI

npx @sonojs/ui@latest add transcription

Usage

transcription.tsx

import {
  Transcription,
  TranscriptionSegment,
  transcriptionDemoSrc,
} from "@/components/sonojs/transcription"

export function Example({
  segments,
  currentTime,
  onSeek,
}: {
  segments: { text: string; startSecond: number; endSecond: number }[]
  currentTime: number
  onSeek: (time: number) => void
}) {
  return (
    <>
      <audio controls src={transcriptionDemoSrc} />
      <Transcription
        currentTime={currentTime}
        onSeek={onSeek}
        segments={segments}
      >
        {(segment, index) => (
          <TranscriptionSegment
            key={`${segment.startSecond}-${segment.endSecond}`}
            index={index}
            segment={segment}
          />
        )}
      </Transcription>
    </>
  )
}

Props

Prop	Type	Default	Description
segments	TranscriptionSegment[]	—	Timed text segments (`text`, `startSecond`, `endSecond`). Empty text is filtered out.
currentTime	number	0	Playback position in seconds (controlled).
onSeek	(time: number) => void	—	Called when a segment is clicked (seek to `startSecond`). Enables pointer styling.
children	(segment, index) => ReactNode	—	Render prop for each non-empty segment — typically `TranscriptionSegment`.