Transcript Viewer

1<script lang="ts" module>
2	import type { HTMLAttributes } from "svelte/elements";
3	import type { Snippet } from "svelte";
4	import type { AudioType, CharacterAlignment, SegmentComposer } from "./context.svelte.js";
5 
6	export type TranscriptViewerProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
7		/** URL of the audio file that backs the transcript. */
8		audioSrc: string;
9		/**
10		 * MIME type emitted on the inner `<source>` element. Set this when
11		 * serving non-MP3 audio so the browser picks the right decoder.
12		 * @default "audio/mpeg"
13		 */
14		audioType?: AudioType;
15		/**
16		 * Character-level alignment used to compute word boundaries and drive
17		 * highlighting. Shape matches ElevenLabs' `CharacterAlignmentResponseModel`;
18		 * reshape other providers' output to the same structure.
19		 */
20		alignment: CharacterAlignment;
21		/**
22		 * Override the default word/gap segmentation. Receives the raw
23		 * alignment and returns the composed `segments` and `words` arrays.
24		 */
25		segmentComposer?: SegmentComposer;
26		/**
27		 * When `true`, ElevenLabs-style tags like `[excited]` are stripped
28		 * from the rendered transcript.
29		 * @default true
30		 */
31		hideAudioTags?: boolean;
32		/** Called when the audio starts playing. */
33		onPlay?: () => void;
34		/** Called when the audio is paused. */
35		onPause?: () => void;
36		/** Called with the current playback time (in seconds) on every audio `timeupdate`. */
37		onTimeUpdate?: (time: number) => void;
38		/** Called when playback reaches the end of the track. */
39		onEnded?: () => void;
40		/** Called with the total duration (in seconds) once metadata is available. */
41		onDurationChange?: (duration: number) => void;
42		/**
43		 * Sub-components composed inside the root (e.g. `<TranscriptViewerAudio />`,
44		 * `<TranscriptViewerWords />`, `<TranscriptViewerScrubBar />`).
45		 */
46		children?: Snippet;
47		/** Bind to the underlying wrapper `<div>` element. */
48		ref?: HTMLDivElement | null;
49	};
50</script>
51 
52<script lang="ts">
53	import { cn } from "$UTILS$.js";
54	import { setTranscriptViewer } from "./context.svelte.js";
55	import { composeSegments, guessedDurationFrom } from "./utils.js";
56 
57	let {
58		audioSrc,
59		audioType = "audio/mpeg",
60		alignment,
61		segmentComposer,
62		hideAudioTags = true,
63		onPlay,
64		onPause,
65		onTimeUpdate,
66		onEnded,
67		onDurationChange,
68		class: className,
69		children,
70		ref = $bindable(null),
71		...restProps
72	}: TranscriptViewerProps = $props();
73 
74	const state = setTranscriptViewer();
75 
76// … truncated