Use word-level transcripts

{
  "type": "config",
  "configuration": {
    "primaryLanguage": "en",
    "wordLevel": { "enabled": true }
  }
}

// A word item from a final /transcribe batch with wordLevel enabled.
interface WordItem {
  // The word as returned in the final transcript.
  text: string;
  // The word as dictated, before post-processing.
  rawTranscriptText: string;
  // Word timing in seconds, relative to the session start.
  start: number;
  end: number;
  isFinal: boolean;
}

// Dictation state: accumulated final word items plus the preview text.
interface WordLevelState {
  words: WordItem[];
  interimText: string;
}

function handleTranscriptMessage(
  state: WordLevelState,
  data: WordItem[],
): WordLevelState {
  // Interim preview: a one-element list whose item is still in
  // progress. The preview is segment level, not per word.
  if (data.length === 1 && data[0].isFinal === false) {
    return { ...state, interimText: data[0].text };
  }

  // Final batch: append the word items, then clear the preview.
  return { ...state, words: [...state.words, ...data], interimText: "" };
}

// From your WebSocket message handler, once the session is connected:
// `state` holds the WordLevelState, `socket` is the /transcribe socket.
// With wordLevel enabled, msg.data is always a list.
socket.on("message", (msg) => {
  if (msg.type === "transcript" && Array.isArray(msg.data)) {
    state = handleTranscriptMessage(state, msg.data);
  }
});

// A word item reduced to what the player needs.
interface PlayerWord {
  text: string;
  // Start of the word in seconds.
  start: number;
  // End of the word in seconds.
  end: number;
}

// Index of the active word at a playback position, or -1 before the
// first word. Words are ordered by start time: binary search finds the
// last word whose start is at or before the position, so the active
// word stays highlighted through any trailing silence until the next
// word begins.
function activeWordIndex(words: PlayerWord[], position: number): number {
  let low = 0;
  let high = words.length - 1;
  let found = -1;
  while (low <= high) {
    const mid = (low + high) >>> 1;
    if (words[mid].start <= position) {
      found = mid;
      low = mid + 1;
    } else {
      high = mid - 1;
    }
  }
  return found;
}

// Drive highlighting at display frame rate. Returns a function that
// stops the loop, for example when the player is unmounted.
function startPlaybackSync(
  audio: HTMLAudioElement,
  words: PlayerWord[],
  onActiveWordChange: (index: number) => void,
) {
  let raf = 0;
  let last = -1;
  const tick = () => {
    const index = activeWordIndex(words, audio.currentTime);
    if (index !== last) {
      last = index;
      onActiveWordChange(index);
    }
    raf = requestAnimationFrame(tick);
  };
  raf = requestAnimationFrame(tick);
  return () => cancelAnimationFrame(raf);
}

// Map the dictation word items to the player's word list.
const playerWords: PlayerWord[] = state.words.map((w) => ({
  text: w.text,
  start: w.start,
  end: w.end,
}));

{
  "recordingId": "<your-recording-id>",
  "primaryLanguage": "en",
  "wordLevel": { "enabled": true }
}