Usage
import {
TranscriptViewerAudio,
TranscriptViewerContainer,
TranscriptViewerPlayPauseButton,
TranscriptViewerScrubBar,
TranscriptViewerWords,
} from "@/components/ui/transcript-viewer";
export function TranscriptViewerExample({ audioSrc, alignment }) {
return (
<TranscriptViewerContainer audioSrc={audioSrc} alignment={alignment}>
<TranscriptViewerAudio />
<TranscriptViewerWords />
<div className="flex items-center gap-3">
<TranscriptViewerPlayPauseButton />
<TranscriptViewerScrubBar />
</div>
</TranscriptViewerContainer>
);
}
Connected examples use ElevenLabs services. Configure the demonstrated server action or token endpoint and agent settings in the host application. Keep API keys on the server; service usage is separate from the MIT-licensed UI.
