"use client"; /** * The podcast player's voice: one section at a time, with the spoken word * reported back so the transcript can highlight it (the Spotify-lyrics bit). * * Two clocks drive the highlight. Where the browser fires `onboundary` * (desktop Chrome and friends) that is exact — the character index maps onto * the word list. Where it does not (iOS Safari, several Android engines) a * timer estimates each word from its length and the playback rate, so the * highlight still moves at roughly speaking speed. The first boundary seen * retires the timer for the rest of the session. * * Pause/seek are implemented by cancelling and re-speaking from a word: the * platform `pause()` is unreliable across browsers, and re-speaking also makes * "jump to a chapter" and "resume where you left off" the same operation. */ import { speechAvailable } from "./speech"; import type { PodcastSection } from "./schemas"; export type PodcastVoice = { section: number; word: number }; /** Tidy text for the speech engine (see the note where it is used). */ export function normaliseSpoken(raw: string): string { return raw .replace(/[\u0000-\u001f\u007f-\u009f\u200b-\u200f\ufeff]/g, " ") .replace(/…/g, ", ") .replace(/\s*—\s*/g, " — ") .replace(/\s+/g, " ") .trim(); } export type PodcastSpeechEvents = { sections: PodcastSection[]; locale: string; /** Read live, so speed and voice changes never rebuild a speaking engine. */ getRate?: () => number; getVoice?: () => SpeechSynthesisVoice | null; /** Global word position changed (word = index inside its section). */ onWord: (position: PodcastVoice) => void; /** Playback actually began (after the engine accepted it). */ onPlay?: () => void; onPause?: () => void; onEnd: () => void; onError?: (message: string) => void; }; export type Token = { section: number; /** Index of the word inside its section. */ index: number; /** Index across the whole episode (the transcript's data-word). */ global: number; start: number; end: number; text: string; }; /** Split into words, keeping each one's character span inside its section. */ export function tokenizeSections(sections: PodcastSection[]): Token[] { const tokens: Token[] = []; sections.forEach((section, sectionIndex) => { const text = section.text; const pattern = /\S+/g; let index = 0; let match: RegExpExecArray | null; while ((match = pattern.exec(text)) !== null) { tokens.push({ section: sectionIndex, index, global: tokens.length, start: match.index, end: match.index + match[0].length, text: match[0], }); index += 1; } }); return tokens; } /** Estimated spoken time of one word at rate 1 (ms). */ function wordDuration(text: string): number { return 95 + 42 * Math.max(1, text.replace(/[^\p{L}\p{N}]/gu, "").length); } export type PodcastSpeech = { play: (from?: PodcastVoice) => void; pause: () => void; stop: () => void; playing: () => boolean; position: () => PodcastVoice | null; words: Token[]; }; export function createPodcastSpeech(events: PodcastSpeechEvents): PodcastSpeech { const tokens = tokenizeSections(events.sections); let playing = false; let position: PodcastVoice | null = null; let boundariesWork: boolean | null = null; let timer: number | null = null; /** Cleared by cancel(): stops stale timers/events from a previous utterance. */ let generation = 0; /** A cancel in the last moments: some engines drop a speak() that follows * one immediately, so it gets a tick of air. */ let lastCancelAt = 0; const clearTimer = () => { if (timer !== null) { window.clearTimeout(timer); timer = null; } }; const finishPass = () => { playing = false; events.onPause?.(); }; const wordsIn = (section: number) => tokens.filter((token) => token.section === section); /** Speak the section from `word` on. Empty word list → the next section. */ const speakFrom = (target: PodcastVoice) => { if (!speechAvailable()) { events.onError?.("unsupported"); return; } const section = events.sections[target.section]; if (!section) { position = null; finishPass(); events.onEnd(); return; } const sectionTokens = wordsIn(target.section); if (sectionTokens.length === 0) { speakFrom({ section: target.section + 1, word: 0 }); return; } const word = Math.min(Math.max(0, target.word), sectionTokens.length - 1); position = { section: target.section, word }; const from = sectionTokens[word].start; /* Spoken text hygiene: engines click on control characters, stray double spaces and unicode ellipses, and some pause oddly around them. */ const text = normaliseSpoken(section.text.slice(from)); const current = ++generation; try { /* Only cancel when something is actually pending: an idle cancel makes several engines pop. */ const synth = window.speechSynthesis; const cancelNeeded = synth.speaking || synth.pending; const cancelledRecently = Date.now() - lastCancelAt < 400; if (cancelNeeded) { synth.cancel(); lastCancelAt = Date.now(); } /* WebKit leaves the synthesis paused after a cancel (and sometimes pauses it on its own): without this resume the next speak() queues silently and the player looks dead after one listen. */ if (synth.paused) synth.resume(); const utterance = new SpeechSynthesisUtterance(text); utterance.lang = events.locale; utterance.rate = Math.min(3, Math.max(0.3, events.getRate?.() ?? 1)); const voice = events.getVoice?.() ?? null; if (voice) utterance.voice = voice; const offsetFor = (charIndex: number) => { /* First token whose span ends after the reported character. */ let found = word; for (let i = word; i < sectionTokens.length; i += 1) { const token = sectionTokens[i]; if (token.end > from + charIndex) { found = i; break; } found = i; } return found; }; utterance.onboundary = (event) => { if (generation !== current) return; if (event.name && event.name !== "word") return; boundariesWork = true; clearTimer(); const index = offsetFor(event.charIndex); position = { section: target.section, word: index }; events.onWord(position); }; utterance.onstart = () => { if (generation !== current) return; playing = true; events.onPlay?.(); events.onWord(position ?? { section: target.section, word }); /* The fallback clock: only while this browser has never reported a * boundary. Each tick schedules the next word by its length. */ if (boundariesWork !== true) { let index = word; const tick = () => { if (generation !== current) return; index += 1; if (index >= sectionTokens.length) { /* Let onend take over; a long word list can outlast the audio * by a hair, and stopping the tick avoids double-advancing. */ timer = null; return; } position = { section: target.section, word: index }; events.onWord(position); timer = window.setTimeout(tick, wordDuration(sectionTokens[index].text) / (events.getRate?.() ?? 1)); }; timer = window.setTimeout(tick, wordDuration(sectionTokens[word].text) / (events.getRate?.() ?? 1)); } }; utterance.onend = () => { if (generation !== current) return; clearTimer(); /* An utterance that ended without a single boundary means the browser does not report them: the fallback clock was the right call. */ if (boundariesWork === null) boundariesWork = false; if (target.section + 1 >= events.sections.length) { position = null; finishPass(); events.onEnd(); return; } /* A short beat between parts: speaking into the engine's tail is what makes the boundary pop on several platforms. */ window.setTimeout(() => { if (generation !== current) return; speakFrom({ section: target.section + 1, word: 0 }); }, 140); }; utterance.onerror = (event) => { if (generation !== current) return; clearTimer(); playing = false; /* "interrupted"/"canceled" are our own stops, not failures. */ const reason = (event as SpeechSynthesisErrorEvent).error; if (reason !== "interrupted" && reason !== "canceled") { events.onError?.(String(reason ?? "error")); events.onPause?.(); } }; const sayIt = () => { if (generation !== current) return; try { window.speechSynthesis.speak(utterance); } catch { playing = false; events.onError?.("error"); } }; /* A speak() that follows a cancel immediately is dropped by several engines (Android Chrome, WebKit); a short beat avoids it. */ if (cancelNeeded || cancelledRecently) window.setTimeout(sayIt, 90); else sayIt(); } catch { playing = false; events.onError?.("error"); } }; return { play(from) { speakFrom(from ?? position ?? { section: 0, word: 0 }); }, pause() { generation += 1; clearTimer(); try { const synth = window.speechSynthesis; if (synth.speaking || synth.pending) { synth.cancel(); lastCancelAt = Date.now(); } /* Cancel leaves some engines (WebKit especially) paused; clear that here so the next play is not a silent no-op. */ if (synth.paused) synth.resume(); } catch { /* already gone */ } playing = false; events.onPause?.(); }, stop() { this.pause(); position = null; }, playing: () => playing, position: () => position, words: tokens, }; }