Voice

Transcript Viewer

A component for displaying an audio transcript with word-by-word highlighting synced to audio playback.

Loading transcript...

Installation

Option A: Via Sora UI CLI (Recommended)

If your project uses `shadcn/ui`, you can install this component and its dependencies automatically:

npx soraui-cli add transcript-viewer

Option B: Manual Copy-Paste

1. Copy the code from the Code > Component tab above.

2. Paste it in your project at components/transcript-viewer.tsx.

3. Install the dependencies:

npm install clsx tailwind-merge lucide-react

API Reference

Complete properties reference for the Audio Timing Visualizer. Sync word-highlighting animations with real sound playbacks or simulated timelines.

Prop	Type	Default	Description
`wordTimings`	`WordTiming[]`	`DEFAULT_TIMINGS`	Array of words with precision start and end timestamps in seconds.
`audioSrc`	`string`	`—`	URL to a speech audio file. Fallbacks to simulated progress bar playback if omitted.
`highlightBg`	`string`	`#ffffff`	Active background highlight color of the word capsule.
`highlightText`	`string`	`#09090b`	Active text color of the highlighted word.
`componentColor`	`string`	`var(--card)`	Background color of the player container card.

Examples

Basic Synced Playback

Renders a word highlight visualizer responding to a custom list of words and timeline offsets.

App.tsx

import { AudioTimingVisualizer } from "@/components/ui/audio-timing-visualizer";

export default function Demo() {
  const timings = [
    { word: "Welcome", start: 0.0, end: 0.5 },
    { word: "to", start: 0.5, end: 0.8 },
    { word: "Sora", start: 0.8, end: 1.2 },
    { word: "UI", start: 1.2, end: 1.8 }
  ];

  return (
    <AudioTimingVisualizer 
      wordTimings={timings}
      highlightBg="var(--primary)"
      highlightText="var(--primary-foreground)"
    />
  );
}