From f82bffa6fd63ec04a676fe79567a5aeb2fe9b0ad Mon Sep 17 00:00:00 2001
From: luke-speechify <289678208+luke-speechify@users.noreply.github.com>
Date: Fri, 21 Aug 2026 11:10:38 +0100
Subject: [PATCH] feat: add streaming-tts-karaoke demo

Realtime streaming TTS on POST /v1/audio/stream/with-timestamps (SSE): each
word highlights the instant its audio + timestamp arrive over the wire, then a
second highlight follows playback via the MediaSource API. A one-route Node
proxy pipes the SSE through so the API key stays server-side. Hosted under
/streaming-tts-karaoke, Turnstile-gated, with a real-API Playwright e2e.
---
 README.md                                     |   1 +
 demos/streaming-tts-karaoke/.env.example      |   1 +
 demos/streaming-tts-karaoke/.gitignore        |  11 +
 demos/streaming-tts-karaoke/README.md         |  65 ++++
 .../app/api/stream/route.ts                   |  63 ++++
 demos/streaming-tts-karaoke/app/globals.css   | 117 +++++++
 demos/streaming-tts-karaoke/app/layout.tsx    |  21 ++
 .../app/lib/turnstile.ts                      |  37 ++
 demos/streaming-tts-karaoke/app/page.tsx      | 323 ++++++++++++++++++
 demos/streaming-tts-karaoke/demo.json         |   6 +
 .../e2e/streaming-tts-karaoke.spec.ts         |  44 +++
 demos/streaming-tts-karaoke/next.config.ts    |  11 +
 demos/streaming-tts-karaoke/package.json      |  27 ++
 .../playwright.config.ts                      |  20 ++
 demos/streaming-tts-karaoke/tsconfig.json     |  41 +++
 pnpm-lock.yaml                                |  72 +++-
 pnpm-workspace.yaml                           |   1 +
 site/public/index.html                        |   4 +-
 vercel.json                                   |   8 +
 19 files changed, 867 insertions(+), 6 deletions(-)
 create mode 100644 demos/streaming-tts-karaoke/.env.example
 create mode 100644 demos/streaming-tts-karaoke/.gitignore
 create mode 100644 demos/streaming-tts-karaoke/README.md
 create mode 100644 demos/streaming-tts-karaoke/app/api/stream/route.ts
 create mode 100644 demos/streaming-tts-karaoke/app/globals.css
 create mode 100644 demos/streaming-tts-karaoke/app/layout.tsx
 create mode 100644 demos/streaming-tts-karaoke/app/lib/turnstile.ts
 create mode 100644 demos/streaming-tts-karaoke/app/page.tsx
 create mode 100644 demos/streaming-tts-karaoke/demo.json
 create mode 100644 demos/streaming-tts-karaoke/e2e/streaming-tts-karaoke.spec.ts
 create mode 100644 demos/streaming-tts-karaoke/next.config.ts
 create mode 100644 demos/streaming-tts-karaoke/package.json
 create mode 100644 demos/streaming-tts-karaoke/playwright.config.ts
 create mode 100644 demos/streaming-tts-karaoke/tsconfig.json

diff --git a/README.md b/README.md
index 6434db4..cd1ff5b 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ Demos with a **Live** link run in your browser at [demos.speechify.ai](https://d
 | [`demos/voice-agent-showcase/`](./demos/voice-agent-showcase) | Cloudflare Workers |  | One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting. |
 | [`demos/vercel-ai-sdk/`](./demos/vercel-ai-sdk) | TypeScript (Vercel AI SDK) |  | Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`. |
 | [`demos/puter-txt2speech/`](./demos/puter-txt2speech) | HTML (puter.js) |  | Speaks with a Simba 3.2 voice via the Speechify provider in Puter's puter.ai.txt2speech() — one static page, your key configured once on the Puter instance. |
+| [`demos/streaming-tts-karaoke/`](./demos/streaming-tts-karaoke) | Next.js | [Open](https://demos.speechify.ai/streaming-tts-karaoke) | Realtime TTS with word timestamps: each word lights up the instant its audio arrives over the stream, then again as it plays. Key held server-side. |
 <!-- DEMOS:END -->
 
 ## Get an API key
diff --git a/demos/streaming-tts-karaoke/.env.example b/demos/streaming-tts-karaoke/.env.example
new file mode 100644
index 0000000..534cec4
--- /dev/null
+++ b/demos/streaming-tts-karaoke/.env.example
@@ -0,0 +1 @@
+SPEECHIFY_API_KEY=your_api_key_here
diff --git a/demos/streaming-tts-karaoke/.gitignore b/demos/streaming-tts-karaoke/.gitignore
new file mode 100644
index 0000000..4c516b0
--- /dev/null
+++ b/demos/streaming-tts-karaoke/.gitignore
@@ -0,0 +1,11 @@
+node_modules/
+.next/
+.env
+next-env.d.ts
+*.tsbuildinfo
+
+# Playwright
+test-results/
+playwright-report/
+/.playwright/
+.last-run.json
diff --git a/demos/streaming-tts-karaoke/README.md b/demos/streaming-tts-karaoke/README.md
new file mode 100644
index 0000000..08277bc
--- /dev/null
+++ b/demos/streaming-tts-karaoke/README.md
@@ -0,0 +1,65 @@
+# Streaming TTS karaoke
+
+Realtime text-to-speech with word timestamps. Speechify's streaming endpoint
+returns audio **and** per-word timings as it synthesizes, so this demo shows two
+highlights at once:
+
+1. **Received** — each word lights up the instant its audio + timestamp arrive
+   over the stream. This is the wire speed: the marks race ahead of playback.
+2. **Playing** — a second highlight follows the actual audio position as it plays
+   back through the browser.
+
+The Speechify API key never reaches the browser — the page talks to a one-route
+server proxy.
+
+Pairs with the Speechify post *Realtime streaming TTS with word highlighting*.
+
+## What you get
+
+- **[`app/api/stream/route.ts`](./app/api/stream/route.ts)** — a Node route that
+  proxies `POST /v1/audio/stream/with-timestamps` (Server-Sent Events) and pipes
+  it straight to the browser, key held server-side.
+- **[`app/page.tsx`](./app/page.tsx)** — parses the SSE `speech.chunk` events,
+  maps each word mark to the rendered text by character offset (the "received"
+  highlight), streams the base64 audio into a `<audio>` element with the
+  [MediaSource API](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API),
+  and follows playback with `requestAnimationFrame` (the "playing" highlight).
+
+## How the endpoint works
+
+`POST /v1/audio/stream/with-timestamps` streams SSE events:
+
+- `speech.chunk` — carries a run of base64 `audio`, a batch of `speech_marks`, or
+  both. Marks are `{ value, start, end, start_time, end_time }` where `start`/`end`
+  are character offsets into your input and the times are **absolute
+  milliseconds** from the start of synthesis. Concatenate the audio into one
+  stream and apply the marks against that single timeline.
+- `speech.done` — terminal, with `billable_characters_count` and `audio_duration_ms`.
+- `speech.error` — terminal error envelope.
+
+Speech marks come from the streaming-native models: `simba-3.2` (used here) and
+`simba-3.0`. The legacy `simba-english` / `simba-multilingual` models return
+`400 speech_marks_unsupported` on this route.
+
+## Run it yourself
+
+```bash
+cp .env.example .env      # paste your Speechify API key
+pnpm install
+pnpm dev                  # http://localhost:8775/streaming-tts-karaoke
+```
+
+Get an API key at [platform.speechify.ai/api-keys](https://platform.speechify.ai/api-keys).
+
+## Tests
+
+```bash
+pnpm e2e                  # Playwright, drives the real streaming API
+```
+
+## Prerequisites
+
+- Node 20+.
+- A browser with MediaSource support for `audio/mpeg` (Chrome/Edge). Where it's
+  unavailable the demo buffers the clip and plays it at the end — the "received"
+  highlight still streams live.
diff --git a/demos/streaming-tts-karaoke/app/api/stream/route.ts b/demos/streaming-tts-karaoke/app/api/stream/route.ts
new file mode 100644
index 0000000..5043e6e
--- /dev/null
+++ b/demos/streaming-tts-karaoke/app/api/stream/route.ts
@@ -0,0 +1,63 @@
+import { verifyTurnstile } from "../../lib/turnstile";
+
+export const runtime = "nodejs";
+// Don't let the platform buffer the SSE — we want events to reach the browser
+// the instant Speechify emits them.
+export const dynamic = "force-dynamic";
+
+const UPSTREAM = "https://api.speechify.ai/v1/audio/stream/with-timestamps";
+
+// Proxies the Speechify streaming-with-timestamps endpoint. It is Server-Sent
+// Events: each `speech.chunk` carries a run of base64 audio and/or word
+// `speech_marks` (absolute-ms times + char offsets into the input). We pass the
+// stream straight through so the browser sees marks and audio arrive live — the
+// API key never leaves the server.
+export async function POST(req: Request) {
+  if (!(await verifyTurnstile(req))) {
+    return new Response("Forbidden", { status: 403 });
+  }
+
+  const key = process.env.SPEECHIFY_API_KEY;
+  if (!key) {
+    return new Response("SPEECHIFY_API_KEY is not set on the server.", { status: 503 });
+  }
+
+  const { input } = (await req.json().catch(() => ({}))) as { input?: unknown };
+  if (typeof input !== "string" || input.trim() === "") {
+    return new Response("`input` text is required", { status: 400 });
+  }
+
+  const upstream = await fetch(UPSTREAM, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${key}`,
+      "content-type": "application/json",
+      accept: "audio/mpeg",
+      // Speech marks are produced by streaming-native models only.
+      "Speechify-Version": "2026-09-13",
+    },
+    body: JSON.stringify({
+      input: input.slice(0, 3000),
+      voice_id: "geffen_32",
+      model: "simba-3.2",
+    }),
+  });
+
+  if (!upstream.ok || !upstream.body) {
+    const detail = await upstream.text().catch(() => "");
+    return new Response(detail || "Speechify request failed", {
+      status: upstream.status || 502,
+    });
+  }
+
+  return new Response(upstream.body, {
+    headers: {
+      "content-type": "text/event-stream; charset=utf-8",
+      "cache-control": "no-store, no-transform",
+      connection: "keep-alive",
+      // Codec of the base64 audio carried in each event (mirrors upstream).
+      "speechify-audio-content-type":
+        upstream.headers.get("speechify-audio-content-type") ?? "audio/mpeg",
+    },
+  });
+}
diff --git a/demos/streaming-tts-karaoke/app/globals.css b/demos/streaming-tts-karaoke/app/globals.css
new file mode 100644
index 0000000..d156742
--- /dev/null
+++ b/demos/streaming-tts-karaoke/app/globals.css
@@ -0,0 +1,117 @@
+/* Speechify brand base — mirrors demos.speechify.ai/site (speechify.ai/brand).
+ * ABC Diatype is licensed and NOT committed; it loads cross-origin from
+ * speechify.ai/fonts. Monochrome palette, thin display type, pill ink buttons. */
+
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
+
+:root {
+  --font-sans: "ABCDiatype", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace;
+  --surface-page: #ffffff;
+  --surface-card: #ffffff;
+  --surface-subtle: #f5f5f5;
+  --surface-raised: #fafafa;
+  --text-primary: #0a0a0a;
+  --text-secondary: #525252;
+  --text-tertiary: #666666;
+  --border-subtle: #e5e5e5;
+  --border-strong: #d1d1d4;
+  --action: #0a0a0a;
+  --action-hover: #2a2a2e;
+  --action-foreground: #fafafa;
+  --focus-ring: rgba(10, 10, 10, 0.22);
+  --danger: #b42318;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 9999px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface-page: #0a0a0a;
+    --surface-card: #101010;
+    --surface-subtle: #161616;
+    --surface-raised: #141414;
+    --text-primary: #fafafa;
+    --text-secondary: #b3b3b3;
+    --text-tertiary: #8a8a8a;
+    --border-subtle: #262626;
+    --border-strong: #3a3a3a;
+    --action: #fafafa;
+    --action-hover: #e5e5e5;
+    --action-foreground: #0a0a0a;
+    --focus-ring: rgba(250, 250, 250, 0.28);
+    --danger: #ff6b5e;
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  padding: 4rem 1.5rem;
+  background: var(--surface-page);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+main { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
+
+h1 { font-weight: 100; font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 0.5rem; }
+
+.eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-tertiary); margin: 0 0 0.75rem; }
+
+.lead { max-width: 62ch; color: var(--text-secondary); font-size: 1.0625rem; margin: 0; }
+
+a { color: inherit; text-underline-offset: 2px; }
+
+code { font-family: var(--font-mono); background: var(--surface-subtle); border: 1px solid var(--border-subtle); padding: 0.08em 0.38em; border-radius: 5px; font-size: 0.85em; }
+
+.card { background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.25rem; }
+
+label { display: block; font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 0.5rem; }
+
+textarea { width: 100%; font: inherit; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.65rem 0.8rem; resize: vertical; }
+
+textarea:focus-visible, button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
+
+.btn { font: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; border-radius: var(--radius-pill); padding: 0.65rem 1.5rem; border: 1px solid transparent; transition: background-color 0.2s ease, color 0.2s ease; }
+.btn-primary { background: var(--action); color: var(--action-foreground); }
+.btn-primary:hover:not(:disabled) { background: var(--action-hover); }
+.btn:disabled { opacity: 0.55; cursor: default; }
+
+footer { color: var(--text-tertiary); font-size: 0.9rem; border-top: 1px solid var(--border-subtle); padding-top: 1.25rem; }
+
+@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.001ms !important; } }
+
+/* ---- demo-specific ---- */
+
+.controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+
+.legend { display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--text-tertiary); }
+.chip { display: inline-flex; align-items: center; gap: 0.35rem; }
+.chip::before { content: ""; width: 0.85rem; height: 0.85rem; border-radius: 3px; display: inline-block; }
+.chip.received::before { background: transparent; border: 2px solid var(--text-primary); }
+.chip.playing::before { background: var(--action); }
+
+.status { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }
+.status.error { color: var(--danger); }
+
+.stage { min-height: 6rem; background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; }
+.hint { color: var(--text-tertiary); margin: 0; }
+
+.words { margin: 0; font-size: 1.5rem; line-height: 1.8; letter-spacing: -0.01em; }
+
+/* Three states: pending (dim) → received (full ink) → playing (inverted pill). */
+.w { color: var(--text-tertiary); transition: color 0.15s ease, background-color 0.15s ease; border-radius: 5px; }
+.w.received { color: var(--text-primary); }
+.w.playing { background: var(--action); color: var(--action-foreground); padding: 0.05em 0.15em; }
+
+audio { width: 100%; margin-top: 0.25rem; }
diff --git a/demos/streaming-tts-karaoke/app/layout.tsx b/demos/streaming-tts-karaoke/app/layout.tsx
new file mode 100644
index 0000000..d7dab72
--- /dev/null
+++ b/demos/streaming-tts-karaoke/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import Script from "next/script";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Streaming TTS karaoke with Speechify",
+  description:
+    "Realtime streaming text-to-speech with word timestamps — each word highlights as its audio streams in, then again as it plays.",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Script src="/turnstile.js" strategy="beforeInteractive" />
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/demos/streaming-tts-karaoke/app/lib/turnstile.ts b/demos/streaming-tts-karaoke/app/lib/turnstile.ts
new file mode 100644
index 0000000..6fee926
--- /dev/null
+++ b/demos/streaming-tts-karaoke/app/lib/turnstile.ts
@@ -0,0 +1,37 @@
+// Verifies a Turnstile token against Cloudflare siteverify. Returns true iff
+// the caller is allowed to proceed.
+//
+// Fail-open contract: when TURNSTILE_SECRET_KEY isn't set (local dev, fork
+// deploys, anywhere the operator hasn't configured Turnstile) OR when the
+// siteverify request itself errors, returns true. The alternative is
+// breaking the demo whenever Turnstile isn't configured — a worse experience
+// than leaving the abuse gate briefly open. Real prod hardening would flip
+// this to fail-closed; this is a reference demo.
+const SITEVERIFY_URL =
+  "https://challenges.cloudflare.com/turnstile/v0/siteverify";
+
+export async function verifyTurnstile(req: Request): Promise<boolean> {
+  const secret = process.env.TURNSTILE_SECRET_KEY;
+  if (!secret) return true;
+
+  const token = req.headers.get("x-turnstile-token");
+  if (!token) return false;
+
+  const form = new URLSearchParams();
+  form.set("secret", secret);
+  form.set("response", token);
+  const remoteip = req.headers
+    .get("x-forwarded-for")
+    ?.split(",")[0]
+    ?.trim();
+  if (remoteip) form.set("remoteip", remoteip);
+
+  try {
+    const cf = await fetch(SITEVERIFY_URL, { method: "POST", body: form });
+    if (!cf.ok) return true;
+    const result = (await cf.json()) as { success?: boolean };
+    return Boolean(result?.success);
+  } catch {
+    return true;
+  }
+}
diff --git a/demos/streaming-tts-karaoke/app/page.tsx b/demos/streaming-tts-karaoke/app/page.tsx
new file mode 100644
index 0000000..b78c7c0
--- /dev/null
+++ b/demos/streaming-tts-karaoke/app/page.tsx
@@ -0,0 +1,323 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const API = "/streaming-tts-karaoke/api/stream";
+
+const SAMPLE =
+  "Streaming text to speech means you do not wait for the whole clip. " +
+  "Each word arrives with its own timestamp, so the page can light it up the " +
+  "moment its audio lands, and then again as it plays.";
+
+type Token = { text: string; start: number; end: number };
+type TimedMark = { idx: number; start: number; end: number };
+
+type TurnstileHandle = {
+  getToken: (opts?: { timeout?: number }) => Promise<string | null>;
+  reset: () => void;
+};
+
+declare global {
+  interface Window {
+    SpeechifyTurnstile?: {
+      render: (target: string | HTMLElement, options?: unknown) => Promise<TurnstileHandle>;
+    };
+  }
+}
+
+// Split input into word tokens, keeping each token's character range so we can
+// line marks (which address the input by char offset) up with what's rendered.
+function tokenize(input: string): Token[] {
+  const tokens: Token[] = [];
+  const re = /\S+/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(input))) tokens.push({ text: m[0], start: m.index, end: m.index + m[0].length });
+  return tokens;
+}
+
+function tokenForCharRange(tokens: Token[], start: number, end: number): number {
+  // The token whose char range overlaps the mark's range.
+  for (let i = 0; i < tokens.length; i++) {
+    if (tokens[i].start < end && tokens[i].end > start) return i;
+  }
+  return -1;
+}
+
+function b64ToBytes(b64: string): Uint8Array {
+  const bin = atob(b64);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes;
+}
+
+export default function Home() {
+  const [text, setText] = useState(SAMPLE);
+  const [tokens, setTokens] = useState<Token[]>([]);
+  const [received, setReceived] = useState<Set<number>>(new Set());
+  const [playingIdx, setPlayingIdx] = useState<number>(-1);
+  const [status, setStatus] = useState("");
+  const [tone, setTone] = useState<"info" | "error">("info");
+  const [busy, setBusy] = useState(false);
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const turnstileRef = useRef<TurnstileHandle | null>(null);
+  const timelineRef = useRef<TimedMark[]>([]);
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      while (!window.SpeechifyTurnstile && !cancelled) await new Promise((r) => setTimeout(r, 30));
+      if (!cancelled) turnstileRef.current = await window.SpeechifyTurnstile!.render("#turnstile-container");
+    })();
+    return () => {
+      cancelled = true;
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  const say = (m: string, t: "info" | "error" = "info") => {
+    setStatus(m);
+    setTone(t);
+  };
+
+  // Follow playback: highlight whichever word's [start,end) contains currentTime.
+  const trackPlayback = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const tick = () => {
+      const t = audio.currentTime * 1000;
+      const mark = timelineRef.current.find((mk) => t >= mk.start && t < mk.end);
+      setPlayingIdx(mark ? mark.idx : -1);
+      if (!audio.paused && !audio.ended) rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  async function speak() {
+    if (busy) return;
+    const input = text.trim();
+    if (!input) {
+      say("Type some text first.", "error");
+      return;
+    }
+
+    // Reset visual state.
+    const toks = tokenize(input);
+    setTokens(toks);
+    setReceived(new Set());
+    setPlayingIdx(-1);
+    timelineRef.current = [];
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    setBusy(true);
+    say("Connecting…");
+
+    // Set up streaming playback via MediaSource when supported; otherwise buffer
+    // the whole clip and play it at the end (arrival highlighting still works).
+    const audio = audioRef.current!;
+    const canMSE =
+      typeof window !== "undefined" &&
+      "MediaSource" in window &&
+      window.MediaSource.isTypeSupported("audio/mpeg");
+
+    let sourceBuffer: SourceBuffer | null = null;
+    const appendQueue: ArrayBuffer[] = [];
+    const fallbackChunks: ArrayBuffer[] = [];
+    let streamDone = false;
+    let mediaSource: MediaSource | null = null;
+    let started = false;
+
+    const flush = () => {
+      if (sourceBuffer && !sourceBuffer.updating && appendQueue.length) {
+        sourceBuffer.appendBuffer(appendQueue.shift()!);
+      }
+      if (
+        streamDone &&
+        mediaSource &&
+        mediaSource.readyState === "open" &&
+        sourceBuffer &&
+        !sourceBuffer.updating &&
+        appendQueue.length === 0
+      ) {
+        try {
+          mediaSource.endOfStream();
+        } catch {
+          /* already ended */
+        }
+      }
+    };
+
+    const startPlayback = () => {
+      if (started) return;
+      started = true;
+      audio.play().then(trackPlayback).catch(() => {
+        /* autoplay blocked — user can hit the native controls */
+      });
+    };
+
+    if (canMSE) {
+      mediaSource = new MediaSource();
+      audio.src = URL.createObjectURL(mediaSource);
+      await new Promise<void>((resolve) => {
+        mediaSource!.addEventListener("sourceopen", () => resolve(), { once: true });
+      });
+      sourceBuffer = mediaSource.addSourceBuffer("audio/mpeg");
+      sourceBuffer.addEventListener("updateend", flush);
+    }
+
+    const pushAudio = (bytes: Uint8Array) => {
+      // A fresh Uint8Array is backed by a plain ArrayBuffer (never Shared).
+      const ab = bytes.buffer as ArrayBuffer;
+      if (canMSE) {
+        appendQueue.push(ab);
+        flush();
+        startPlayback();
+      } else {
+        fallbackChunks.push(ab);
+      }
+    };
+
+    try {
+      const token = turnstileRef.current ? await turnstileRef.current.getToken() : null;
+      const headers: Record<string, string> = { "content-type": "application/json" };
+      if (token) headers["x-turnstile-token"] = token;
+
+      const res = await fetch(API, { method: "POST", headers, body: JSON.stringify({ input }) });
+      turnstileRef.current?.reset();
+      if (!res.ok || !res.body) throw new Error((await res.text()) || `Request failed (${res.status})`);
+
+      say("Streaming…");
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buf = "";
+
+      // Parse the SSE stream event-by-event as bytes arrive.
+      for (;;) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        const blocks = buf.split("\n\n");
+        buf = blocks.pop() ?? "";
+        for (const block of blocks) {
+          const dataLine = block
+            .split("\n")
+            .filter((l) => l.startsWith("data:"))
+            .map((l) => l.slice(5).trim())
+            .join("");
+          if (!dataLine) continue;
+          let evt: {
+            type?: string;
+            audio?: string;
+            speech_marks?: { start?: number; end?: number; start_time?: number; end_time?: number }[];
+            error?: { message?: string };
+          };
+          try {
+            evt = JSON.parse(dataLine);
+          } catch {
+            continue;
+          }
+
+          if (evt.type === "speech.error") {
+            throw new Error(evt.error?.message || "stream error");
+          }
+          if (evt.speech_marks?.length) {
+            setReceived((prev) => {
+              const next = new Set(prev);
+              for (const mk of evt.speech_marks!) {
+                const idx = tokenForCharRange(toks, mk.start ?? 0, mk.end ?? 0);
+                if (idx >= 0) {
+                  next.add(idx);
+                  timelineRef.current.push({
+                    idx,
+                    start: mk.start_time ?? 0,
+                    end: mk.end_time ?? Number.MAX_SAFE_INTEGER,
+                  });
+                }
+              }
+              return next;
+            });
+          }
+          if (evt.audio) pushAudio(b64ToBytes(evt.audio));
+        }
+      }
+
+      streamDone = true;
+      if (canMSE) {
+        flush();
+      } else if (fallbackChunks.length) {
+        const blob = new Blob(fallbackChunks, { type: "audio/mpeg" });
+        audio.src = URL.createObjectURL(blob);
+        startPlayback();
+      }
+      say("Done — playing back.");
+    } catch (err) {
+      say((err as Error).message || "Something went wrong.", "error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <main>
+      <header>
+        <p className="eyebrow">SpeechifyAI · Streaming API</p>
+        <h1>Streaming TTS, word by word.</h1>
+        <p className="lead">
+          The streaming endpoint returns audio <em>and</em> word timestamps as it synthesizes. Each
+          word lights up the instant its audio arrives over the wire, then a second highlight follows
+          the actual playback. The API key stays server-side.
+        </p>
+      </header>
+
+      <div className="card">
+        <label htmlFor="src">Text</label>
+        <textarea id="src" value={text} onChange={(e) => setText(e.target.value)} rows={4} />
+      </div>
+
+      <div id="turnstile-container" />
+
+      <div className="controls">
+        <button className="btn btn-primary" onClick={speak} disabled={busy}>
+          {busy ? "Streaming…" : "▶ Stream it"}
+        </button>
+        <div className="legend" aria-hidden>
+          <span className="chip received">received</span>
+          <span className="chip playing">playing</span>
+        </div>
+      </div>
+
+      {status ? <p className={tone === "error" ? "status error" : "status"}>{status}</p> : null}
+
+      <div className="stage" aria-live="polite">
+        {tokens.length === 0 ? (
+          <p className="hint">Hit “Stream it” and watch the words arrive.</p>
+        ) : (
+          <p className="words">
+            {tokens.map((t, i) => (
+              <span
+                key={i}
+                className={`w${received.has(i) ? " received" : ""}${i === playingIdx ? " playing" : ""}`}
+              >
+                {t.text}{" "}
+              </span>
+            ))}
+          </p>
+        )}
+      </div>
+
+      <audio ref={audioRef} controls hidden={tokens.length === 0} />
+
+      <footer>
+        <p>
+          Built on <code>POST /v1/audio/stream/with-timestamps</code> (Server-Sent Events, model{" "}
+          <code>simba-3.2</code>). Each <code>speech.chunk</code> carries base64 audio and/or word{" "}
+          <code>speech_marks</code> with absolute-millisecond times. Playback streams in via the{" "}
+          <a href="https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API">
+            MediaSource API
+          </a>
+          .
+        </p>
+      </footer>
+    </main>
+  );
+}
diff --git a/demos/streaming-tts-karaoke/demo.json b/demos/streaming-tts-karaoke/demo.json
new file mode 100644
index 0000000..b7b546d
--- /dev/null
+++ b/demos/streaming-tts-karaoke/demo.json
@@ -0,0 +1,6 @@
+{
+  "order": 225,
+  "title": "Streaming TTS karaoke",
+  "stack": "Next.js",
+  "blurb": "Realtime TTS with word timestamps: each word lights up the instant its audio arrives over the stream, then again as it plays. Key held server-side."
+}
diff --git a/demos/streaming-tts-karaoke/e2e/streaming-tts-karaoke.spec.ts b/demos/streaming-tts-karaoke/e2e/streaming-tts-karaoke.spec.ts
new file mode 100644
index 0000000..279da8b
--- /dev/null
+++ b/demos/streaming-tts-karaoke/e2e/streaming-tts-karaoke.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect } from "@playwright/test";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const BASE = "/streaming-tts-karaoke";
+const here = dirname(fileURLToPath(import.meta.url));
+// The shared Turnstile helper is served at the domain root only when hosted;
+// under `pnpm dev` it 404s. Serve the GENUINE file so the real widget code runs
+// (it fails open on localhost, exactly like production). Not a mock.
+const TURNSTILE_JS = readFileSync(join(here, "..", "..", "..", "site", "public", "turnstile.js"), "utf8");
+
+test.skip(!process.env.SPEECHIFY_API_KEY, "needs SPEECHIFY_API_KEY");
+
+test("streams real audio + word marks and highlights words as they arrive", async ({ page }) => {
+  await page.route("**/turnstile.js", (route) =>
+    route.fulfill({ contentType: "application/javascript", body: TURNSTILE_JS }),
+  );
+
+  await page.goto(`${BASE}`);
+  await expect(page.getByRole("heading", { name: /streaming tts/i })).toBeVisible();
+  await expect(page.locator("#turnstile-container")).toBeAttached();
+
+  // Start streaming and confirm the real SSE endpoint responds.
+  const sse = page.waitForResponse(
+    (r) => r.url().includes("/api/stream") && r.status() === 200,
+    { timeout: 60_000 },
+  );
+  await page.getByRole("button", { name: /stream it/i }).click();
+  const res = await sse;
+  expect(res.headers()["content-type"]).toContain("text/event-stream");
+
+  // The "received" highlight proves word marks arrived over the wire and mapped
+  // onto the rendered text.
+  await expect(page.locator(".w.received").first()).toBeVisible({ timeout: 45_000 });
+  expect(await page.locator(".w.received").count()).toBeGreaterThan(1);
+
+  // Audio element got a source (MediaSource object URL or a buffered blob).
+  await expect
+    .poll(async () => page.locator("audio").evaluate((el: HTMLAudioElement) => el.src), {
+      timeout: 45_000,
+    })
+    .toMatch(/^blob:/);
+});
diff --git a/demos/streaming-tts-karaoke/next.config.ts b/demos/streaming-tts-karaoke/next.config.ts
new file mode 100644
index 0000000..c038ec0
--- /dev/null
+++ b/demos/streaming-tts-karaoke/next.config.ts
@@ -0,0 +1,11 @@
+import type { NextConfig } from "next";
+
+const basePath = "/streaming-tts-karaoke";
+
+const nextConfig: NextConfig = {
+  // Mounted as a Vercel Service under this subpath on demos.speechify.ai.
+  // Standalone (`npm run dev`) also serves under this prefix.
+  basePath,
+};
+
+export default nextConfig;
diff --git a/demos/streaming-tts-karaoke/package.json b/demos/streaming-tts-karaoke/package.json
new file mode 100644
index 0000000..02b9df7
--- /dev/null
+++ b/demos/streaming-tts-karaoke/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "streaming-tts-karaoke",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "Realtime streaming TTS with dual word highlighting — words light up as their audio arrives, then again as it plays",
+  "scripts": {
+    "dev": "next dev -p 8775",
+    "build": "next build",
+    "start": "next start -p 8775",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
+    "e2e": "playwright test"
+  },
+  "dependencies": {
+    "next": "^16.2.10",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "typescript": "^5.6.0"
+  }
+}
diff --git a/demos/streaming-tts-karaoke/playwright.config.ts b/demos/streaming-tts-karaoke/playwright.config.ts
new file mode 100644
index 0000000..f08978f
--- /dev/null
+++ b/demos/streaming-tts-karaoke/playwright.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: 90_000,
+  expect: { timeout: 30_000 },
+  reporter: "list",
+  fullyParallel: false,
+  workers: 1,
+  use: {
+    baseURL: "http://localhost:8775",
+    trace: "on-first-retry",
+  },
+  webServer: {
+    command: "pnpm dev",
+    url: "http://localhost:8775/streaming-tts-karaoke",
+    timeout: 120_000,
+    reuseExistingServer: !process.env.CI,
+  },
+});
diff --git a/demos/streaming-tts-karaoke/tsconfig.json b/demos/streaming-tts-karaoke/tsconfig.json
new file mode 100644
index 0000000..637ff2c
--- /dev/null
+++ b/demos/streaming-tts-karaoke/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2022"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8afd9c..f8ea8e3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,7 +22,7 @@ importers:
         version: 7.0.34(zod@4.4.3)
       next:
         specifier: ^16.2.10
-        version: 16.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 16.2.10(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
         specifier: ^19.2.0
         version: 19.2.7
@@ -47,7 +47,7 @@ importers:
     dependencies:
       next:
         specifier: ^16.2.10
-        version: 16.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 16.2.10(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
         specifier: ^19.2.0
         version: 19.2.7
@@ -75,7 +75,7 @@ importers:
         version: 3.0.1
       next:
         specifier: ^16.2.10
-        version: 16.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 16.2.10(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
         specifier: ^19.2.0
         version: 19.2.7
@@ -96,6 +96,34 @@ importers:
         specifier: ^5.6.0
         version: 5.9.3
 
+  demos/streaming-tts-karaoke:
+    dependencies:
+      next:
+        specifier: ^16.2.10
+        version: 16.2.10(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react:
+        specifier: ^19.2.0
+        version: 19.2.7
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.7(react@19.2.7)
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.50.0
+        version: 1.62.1
+      '@types/node':
+        specifier: ^22.0.0
+        version: 22.20.1
+      '@types/react':
+        specifier: ^19.2.0
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: ^19.2.0
+        version: 19.2.3(@types/react@19.2.17)
+      typescript:
+        specifier: ^5.6.0
+        version: 5.9.3
+
   site: {}
 
 packages:
@@ -307,6 +335,11 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@playwright/test@1.62.1':
+    resolution: {integrity: sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   '@speechify/api@3.0.1':
     resolution: {integrity: sha512-bEqbyvwGW0A/cgq+ZsQJVP3Hm4/0Bm1sniVtPLBh7vDNG2f/YY8y8sweWojoUnhIeIAL6bHBde43+VZLA2MYpA==}
     engines: {node: '>=18.0.0'}
@@ -393,6 +426,11 @@ packages:
     resolution: {integrity: sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==}
     engines: {node: '>=18.0.0'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   json-schema@0.4.0:
     resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
 
@@ -425,6 +463,16 @@ packages:
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
+  playwright-core@1.62.1:
+    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  playwright@1.62.1:
+    resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -634,6 +682,10 @@ snapshots:
   '@next/swc-win32-x64-msvc@16.2.10':
     optional: true
 
+  '@playwright/test@1.62.1':
+    dependencies:
+      playwright: 1.62.1
+
   '@speechify/api@3.0.1': {}
 
   '@standard-schema/spec@1.1.0': {}
@@ -696,11 +748,14 @@ snapshots:
 
   eventsource-parser@3.1.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   json-schema@0.4.0: {}
 
   nanoid@3.3.16: {}
 
-  next@16.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+  next@16.2.10(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       '@next/env': 16.2.10
       '@swc/helpers': 0.5.15
@@ -719,6 +774,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 16.2.10
       '@next/swc-win32-arm64-msvc': 16.2.10
       '@next/swc-win32-x64-msvc': 16.2.10
+      '@playwright/test': 1.62.1
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -726,6 +782,14 @@ snapshots:
 
   picocolors@1.1.1: {}
 
+  playwright-core@1.62.1: {}
+
+  playwright@1.62.1:
+    dependencies:
+      playwright-core: 1.62.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.16
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 32f9179..b68090a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -10,3 +10,4 @@ packages:
   - "demos/ai-sdk-speechify-speech"
   - "demos/next-voice-cloning-app"
   - "demos/multilingual-voiceover"
+  - "demos/streaming-tts-karaoke"
diff --git a/site/public/index.html b/site/public/index.html
index ae37691..f1692cf 100644
--- a/site/public/index.html
+++ b/site/public/index.html
@@ -276,7 +276,7 @@
     <!-- End PostHog -->
 
     <!-- JSONLD:START -->
-    <script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://demos.speechify.ai/#org","name":"Speechify AI","url":"https://speechify.ai","logo":"https://demos.speechify.ai/apple-touch-icon.png","sameAs":["https://github.com/SpeechifyInc","https://x.com/SpeechifyAI","https://www.linkedin.com/company/speechifyinc/"]},{"@type":"WebSite","@id":"https://demos.speechify.ai/#website","url":"https://demos.speechify.ai/","name":"Speechify Demos","description":"Open-source demos built on the Speechify API — text-to-speech, voice cloning, and real-time voice agents.","publisher":{"@id":"https://demos.speechify.ai/#org"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"SpeechifyAI","item":"https://speechify.ai"},{"@type":"ListItem","position":2,"name":"Demos","item":"https://demos.speechify.ai/"}]},{"@type":"ItemList","name":"Speechify API demos","numberOfItems":18,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"SoftwareApplication","name":"Voice cloning web app","description":"Upload a sample, clone the voice, synthesize with the clone. The API key stays server-side in route handlers.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/next-voice-cloning-app","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":2,"item":{"@type":"SoftwareApplication","name":"AI SDK speech generation","description":"A custom Speechify speech model for the AI SDK's generateSpeech, wired into a Next.js page. The API key stays server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/ai-sdk-speechify-speech","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":3,"item":{"@type":"SoftwareApplication","name":"Multilingual voiceover","description":"Generate the same line in six languages with a locale-matched simba-3.0 voice. The API key stays server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/multilingual-voiceover","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":4,"item":{"@type":"SoftwareApplication","name":"Captions from speech marks","description":"Synthesizes audio and builds a WebVTT caption file from the speech marks the API returns in the same response. Karaoke-highlight HTML demo included.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/captions-speech-marks","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":5,"item":{"@type":"SoftwareApplication","name":"Voice cloning narration","description":"Clones a voice from a 10-30 sec WAV sample, synthesizes with the new voice, deletes the clone. End-to-end lifecycle.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/voice-cloning-narration","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":6,"item":{"@type":"SoftwareApplication","name":"Audiobook pipeline","description":"Chunks long-form text on sentence boundaries, synthesizes each chunk via the Speechify Python SDK, concatenates the MP3s with ffmpeg.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/audiobook-pipeline","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":7,"item":{"@type":"SoftwareApplication","name":"LiveKit agent (official plugin)","description":"Real-time voice assistant using LiveKit's official livekit-plugins-speechify package for TTS, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-agent-speechify-python","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":8,"item":{"@type":"SoftwareApplication","name":"LiveKit voice agent","description":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession. Prefer the official LiveKit plugin demo for new work.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-voice-agent-python","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":9,"item":{"@type":"SoftwareApplication","name":"LiveKit voice agent","description":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-voice-agent-node","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":10,"item":{"@type":"SoftwareApplication","name":"SSML emotion TTS","description":"Drives emotion, pauses, prosody, emphasis, and pronunciation with SSML in a single POST /v1/audio/speech request.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/ssml-emotion-tts","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":11,"item":{"@type":"SoftwareApplication","name":"Web audio streaming","description":"Streams Speechify PCM into the browser Web Audio API for low-latency playback, behind a zero-dep proxy that keeps the key server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/web-audio-streaming","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":12,"item":{"@type":"SoftwareApplication","name":"Deepgram voice agent shim","description":"Points Deepgram Voice Agent at the tts-shims OpenAI-compatible proxy so it speaks with a Speechify voice, key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/deepgram-voice-agent-shim","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":13,"item":{"@type":"SoftwareApplication","name":"Vapi custom voice","description":"Points Vapi custom voice at the tts-shims Vapi-compatible proxy so it speaks with Speechify raw PCM, key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/vapi-custom-voice","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":14,"item":{"@type":"SoftwareApplication","name":"Pipecat agent","description":"Real-time voice pipeline using Pipecat with Deepgram STT, Anthropic Claude, and Speechify TTS through SpeechifyTTSService.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/pipecat-agent-speechify","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":15,"item":{"@type":"SoftwareApplication","name":"Mastra voice agent","description":"Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/mastra-agent-speechify","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":16,"item":{"@type":"SoftwareApplication","name":"Voice agent capability showcase","description":"One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/voice-agent-showcase","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":17,"item":{"@type":"SoftwareApplication","name":"Vercel AI SDK","description":"Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/vercel-ai-sdk","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":18,"item":{"@type":"SoftwareApplication","name":"Speechify TTS in Puter","description":"Speaks with a Simba 3.2 voice via the Speechify provider in Puter's puter.ai.txt2speech() — one static page, your key configured once on the Puter instance.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/puter-txt2speech","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What are the Speechify demos?","acceptedAnswer":{"@type":"Answer","text":"Open-source, self-contained example apps for the Speechify API — text-to-speech, voice cloning, SSML, and real-time voice agents. Each demo lives in its own folder, runs on its own, and links to its source. Hosted demos run live in the browser."}},{"@type":"Question","name":"Are the demos free and open source?","acceptedAnswer":{"@type":"Answer","text":"Yes. Every demo is MIT-licensed and published at github.com/Speechify-AI/demos. Clone a folder, add your Speechify API key, and run it."}},{"@type":"Question","name":"What do I need to run a demo?","acceptedAnswer":{"@type":"Answer","text":"A Speechify API key from platform.speechify.ai/api-keys, plus the runtime the demo uses (Node, Python, or Go). Each demo's README lists its exact prerequisites."}},{"@type":"Question","name":"Which demos can I try without installing anything?","acceptedAnswer":{"@type":"Answer","text":"Demos marked LIVE run hosted at demos.speechify.ai/<demo-name>. The rest are clone-and-run from the repo."}}]}]}</script>
+    <script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://demos.speechify.ai/#org","name":"Speechify AI","url":"https://speechify.ai","logo":"https://demos.speechify.ai/apple-touch-icon.png","sameAs":["https://github.com/SpeechifyInc","https://x.com/SpeechifyAI","https://www.linkedin.com/company/speechifyinc/"]},{"@type":"WebSite","@id":"https://demos.speechify.ai/#website","url":"https://demos.speechify.ai/","name":"Speechify Demos","description":"Open-source demos built on the Speechify API — text-to-speech, voice cloning, and real-time voice agents.","publisher":{"@id":"https://demos.speechify.ai/#org"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"SpeechifyAI","item":"https://speechify.ai"},{"@type":"ListItem","position":2,"name":"Demos","item":"https://demos.speechify.ai/"}]},{"@type":"ItemList","name":"Speechify API demos","numberOfItems":19,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"SoftwareApplication","name":"Voice cloning web app","description":"Upload a sample, clone the voice, synthesize with the clone. The API key stays server-side in route handlers.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/next-voice-cloning-app","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":2,"item":{"@type":"SoftwareApplication","name":"AI SDK speech generation","description":"A custom Speechify speech model for the AI SDK's generateSpeech, wired into a Next.js page. The API key stays server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/ai-sdk-speechify-speech","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":3,"item":{"@type":"SoftwareApplication","name":"Multilingual voiceover","description":"Generate the same line in six languages with a locale-matched simba-3.0 voice. The API key stays server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/multilingual-voiceover","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":4,"item":{"@type":"SoftwareApplication","name":"Captions from speech marks","description":"Synthesizes audio and builds a WebVTT caption file from the speech marks the API returns in the same response. Karaoke-highlight HTML demo included.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/captions-speech-marks","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":5,"item":{"@type":"SoftwareApplication","name":"Voice cloning narration","description":"Clones a voice from a 10-30 sec WAV sample, synthesizes with the new voice, deletes the clone. End-to-end lifecycle.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/voice-cloning-narration","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":6,"item":{"@type":"SoftwareApplication","name":"Audiobook pipeline","description":"Chunks long-form text on sentence boundaries, synthesizes each chunk via the Speechify Python SDK, concatenates the MP3s with ffmpeg.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/audiobook-pipeline","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":7,"item":{"@type":"SoftwareApplication","name":"LiveKit agent (official plugin)","description":"Real-time voice assistant using LiveKit's official livekit-plugins-speechify package for TTS, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-agent-speechify-python","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":8,"item":{"@type":"SoftwareApplication","name":"LiveKit voice agent","description":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession. Prefer the official LiveKit plugin demo for new work.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-voice-agent-python","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":9,"item":{"@type":"SoftwareApplication","name":"LiveKit voice agent","description":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-voice-agent-node","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":10,"item":{"@type":"SoftwareApplication","name":"SSML emotion TTS","description":"Drives emotion, pauses, prosody, emphasis, and pronunciation with SSML in a single POST /v1/audio/speech request.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/ssml-emotion-tts","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":11,"item":{"@type":"SoftwareApplication","name":"Web audio streaming","description":"Streams Speechify PCM into the browser Web Audio API for low-latency playback, behind a zero-dep proxy that keeps the key server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/web-audio-streaming","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":12,"item":{"@type":"SoftwareApplication","name":"Deepgram voice agent shim","description":"Points Deepgram Voice Agent at the tts-shims OpenAI-compatible proxy so it speaks with a Speechify voice, key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/deepgram-voice-agent-shim","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":13,"item":{"@type":"SoftwareApplication","name":"Vapi custom voice","description":"Points Vapi custom voice at the tts-shims Vapi-compatible proxy so it speaks with Speechify raw PCM, key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/vapi-custom-voice","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":14,"item":{"@type":"SoftwareApplication","name":"Pipecat agent","description":"Real-time voice pipeline using Pipecat with Deepgram STT, Anthropic Claude, and Speechify TTS through SpeechifyTTSService.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/pipecat-agent-speechify","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":15,"item":{"@type":"SoftwareApplication","name":"Mastra voice agent","description":"Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/mastra-agent-speechify","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":16,"item":{"@type":"SoftwareApplication","name":"Voice agent capability showcase","description":"One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/voice-agent-showcase","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":17,"item":{"@type":"SoftwareApplication","name":"Vercel AI SDK","description":"Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/vercel-ai-sdk","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":18,"item":{"@type":"SoftwareApplication","name":"Speechify TTS in Puter","description":"Speaks with a Simba 3.2 voice via the Speechify provider in Puter's puter.ai.txt2speech() — one static page, your key configured once on the Puter instance.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/puter-txt2speech","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":19,"item":{"@type":"SoftwareApplication","name":"Streaming TTS karaoke","description":"Realtime TTS with word timestamps: each word lights up the instant its audio arrives over the stream, then again as it plays. Key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/streaming-tts-karaoke","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What are the Speechify demos?","acceptedAnswer":{"@type":"Answer","text":"Open-source, self-contained example apps for the Speechify API — text-to-speech, voice cloning, SSML, and real-time voice agents. Each demo lives in its own folder, runs on its own, and links to its source. Hosted demos run live in the browser."}},{"@type":"Question","name":"Are the demos free and open source?","acceptedAnswer":{"@type":"Answer","text":"Yes. Every demo is MIT-licensed and published at github.com/Speechify-AI/demos. Clone a folder, add your Speechify API key, and run it."}},{"@type":"Question","name":"What do I need to run a demo?","acceptedAnswer":{"@type":"Answer","text":"A Speechify API key from platform.speechify.ai/api-keys, plus the runtime the demo uses (Node, Python, or Go). Each demo's README lists its exact prerequisites."}},{"@type":"Question","name":"Which demos can I try without installing anything?","acceptedAnswer":{"@type":"Answer","text":"Demos marked LIVE run hosted at demos.speechify.ai/<demo-name>. The rest are clone-and-run from the repo."}}]}]}</script>
 <!-- JSONLD:END -->
   </head>
   <body>
@@ -368,7 +368,7 @@ <h2>FAQ</h2>
 
     <script>
       /* DEMOS_DATA:START */
-      window.__DEMOS__ = [{"slug":"next-voice-cloning-app","repoPath":"demos/next-voice-cloning-app","title":"Voice cloning web app","stack":"Next.js","hosted":true,"blurb":"Upload a sample, clone the voice, synthesize with the clone. The API key stays server-side in route handlers."},{"slug":"ai-sdk-speechify-speech","repoPath":"demos/ai-sdk-speechify-speech","title":"AI SDK speech generation","stack":"Next.js + AI SDK","hosted":true,"blurb":"A custom Speechify speech model for the AI SDK's generateSpeech, wired into a Next.js page. The API key stays server-side."},{"slug":"multilingual-voiceover","repoPath":"demos/multilingual-voiceover","title":"Multilingual voiceover","stack":"Next.js + simba-3.0","hosted":true,"blurb":"Generate the same line in six languages with a locale-matched simba-3.0 voice. The API key stays server-side."},{"slug":"captions-speech-marks","repoPath":"demos/captions-speech-marks","title":"Captions from speech marks","stack":"TypeScript (native)","hosted":false,"blurb":"Synthesizes audio and builds a WebVTT caption file from the speech marks the API returns in the same response. Karaoke-highlight HTML demo included."},{"slug":"voice-cloning-narration","repoPath":"demos/voice-cloning-narration","title":"Voice cloning narration","stack":"TypeScript (native)","hosted":false,"blurb":"Clones a voice from a 10-30 sec WAV sample, synthesizes with the new voice, deletes the clone. End-to-end lifecycle."},{"slug":"audiobook-pipeline","repoPath":"demos/audiobook-pipeline","title":"Audiobook pipeline","stack":"Python (SDK)","hosted":false,"blurb":"Chunks long-form text on sentence boundaries, synthesizes each chunk via the Speechify Python SDK, concatenates the MP3s with ffmpeg."},{"slug":"livekit-agent-speechify-python","repoPath":"demos/livekit-agent-speechify-python","title":"LiveKit agent (official plugin)","stack":"Python (LiveKit)","hosted":false,"blurb":"Real-time voice assistant using LiveKit's official livekit-plugins-speechify package for TTS, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession."},{"slug":"livekit-voice-agent-python","repoPath":"demos/livekit-voice-agent-python","title":"LiveKit voice agent","stack":"Python (LiveKit)","hosted":false,"blurb":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession. Prefer the official LiveKit plugin demo for new work."},{"slug":"livekit-voice-agent-node","repoPath":"demos/livekit-voice-agent-node","title":"LiveKit voice agent","stack":"TypeScript (LiveKit)","hosted":false,"blurb":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession."},{"slug":"ssml-emotion-tts","repoPath":"demos/ssml-emotion-tts","title":"SSML emotion TTS","stack":"TypeScript (SDK)","hosted":false,"blurb":"Drives emotion, pauses, prosody, emphasis, and pronunciation with SSML in a single POST /v1/audio/speech request."},{"slug":"web-audio-streaming","repoPath":"demos/web-audio-streaming","title":"Web audio streaming","stack":"TypeScript (browser)","hosted":false,"blurb":"Streams Speechify PCM into the browser Web Audio API for low-latency playback, behind a zero-dep proxy that keeps the key server-side."},{"slug":"deepgram-voice-agent-shim","repoPath":"demos/deepgram-voice-agent-shim","title":"Deepgram voice agent shim","stack":"Go shim + Node","hosted":false,"blurb":"Points Deepgram Voice Agent at the tts-shims OpenAI-compatible proxy so it speaks with a Speechify voice, key held server-side."},{"slug":"vapi-custom-voice","repoPath":"demos/vapi-custom-voice","title":"Vapi custom voice","stack":"Go shim","hosted":false,"blurb":"Points Vapi custom voice at the tts-shims Vapi-compatible proxy so it speaks with Speechify raw PCM, key held server-side."},{"slug":"pipecat-agent-speechify","repoPath":"demos/pipecat-agent-speechify","title":"Pipecat agent","stack":"Python (Pipecat)","hosted":false,"blurb":"Real-time voice pipeline using Pipecat with Deepgram STT, Anthropic Claude, and Speechify TTS through SpeechifyTTSService."},{"slug":"mastra-agent-speechify","repoPath":"demos/mastra-agent-speechify","title":"Mastra voice agent","stack":"TypeScript (Mastra)","hosted":false,"blurb":"Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`."},{"slug":"voice-agent-showcase","repoPath":"demos/voice-agent-showcase","title":"Voice agent capability showcase","stack":"Cloudflare Workers","hosted":false,"blurb":"One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting."},{"slug":"vercel-ai-sdk","repoPath":"demos/vercel-ai-sdk","title":"Vercel AI SDK","stack":"TypeScript (Vercel AI SDK)","hosted":false,"blurb":"Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`."},{"slug":"puter-txt2speech","repoPath":"demos/puter-txt2speech","title":"Speechify TTS in Puter","stack":"HTML (puter.js)","hosted":false,"blurb":"Speaks with a Simba 3.2 voice via the Speechify provider in Puter's puter.ai.txt2speech() — one static page, your key configured once on the Puter instance."}];
+      window.__DEMOS__ = [{"slug":"next-voice-cloning-app","repoPath":"demos/next-voice-cloning-app","title":"Voice cloning web app","stack":"Next.js","hosted":true,"blurb":"Upload a sample, clone the voice, synthesize with the clone. The API key stays server-side in route handlers."},{"slug":"ai-sdk-speechify-speech","repoPath":"demos/ai-sdk-speechify-speech","title":"AI SDK speech generation","stack":"Next.js + AI SDK","hosted":true,"blurb":"A custom Speechify speech model for the AI SDK's generateSpeech, wired into a Next.js page. The API key stays server-side."},{"slug":"multilingual-voiceover","repoPath":"demos/multilingual-voiceover","title":"Multilingual voiceover","stack":"Next.js + simba-3.0","hosted":true,"blurb":"Generate the same line in six languages with a locale-matched simba-3.0 voice. The API key stays server-side."},{"slug":"captions-speech-marks","repoPath":"demos/captions-speech-marks","title":"Captions from speech marks","stack":"TypeScript (native)","hosted":false,"blurb":"Synthesizes audio and builds a WebVTT caption file from the speech marks the API returns in the same response. Karaoke-highlight HTML demo included."},{"slug":"voice-cloning-narration","repoPath":"demos/voice-cloning-narration","title":"Voice cloning narration","stack":"TypeScript (native)","hosted":false,"blurb":"Clones a voice from a 10-30 sec WAV sample, synthesizes with the new voice, deletes the clone. End-to-end lifecycle."},{"slug":"audiobook-pipeline","repoPath":"demos/audiobook-pipeline","title":"Audiobook pipeline","stack":"Python (SDK)","hosted":false,"blurb":"Chunks long-form text on sentence boundaries, synthesizes each chunk via the Speechify Python SDK, concatenates the MP3s with ffmpeg."},{"slug":"livekit-agent-speechify-python","repoPath":"demos/livekit-agent-speechify-python","title":"LiveKit agent (official plugin)","stack":"Python (LiveKit)","hosted":false,"blurb":"Real-time voice assistant using LiveKit's official livekit-plugins-speechify package for TTS, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession."},{"slug":"livekit-voice-agent-python","repoPath":"demos/livekit-voice-agent-python","title":"LiveKit voice agent","stack":"Python (LiveKit)","hosted":false,"blurb":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession. Prefer the official LiveKit plugin demo for new work."},{"slug":"livekit-voice-agent-node","repoPath":"demos/livekit-voice-agent-node","title":"LiveKit voice agent","stack":"TypeScript (LiveKit)","hosted":false,"blurb":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession."},{"slug":"ssml-emotion-tts","repoPath":"demos/ssml-emotion-tts","title":"SSML emotion TTS","stack":"TypeScript (SDK)","hosted":false,"blurb":"Drives emotion, pauses, prosody, emphasis, and pronunciation with SSML in a single POST /v1/audio/speech request."},{"slug":"web-audio-streaming","repoPath":"demos/web-audio-streaming","title":"Web audio streaming","stack":"TypeScript (browser)","hosted":false,"blurb":"Streams Speechify PCM into the browser Web Audio API for low-latency playback, behind a zero-dep proxy that keeps the key server-side."},{"slug":"deepgram-voice-agent-shim","repoPath":"demos/deepgram-voice-agent-shim","title":"Deepgram voice agent shim","stack":"Go shim + Node","hosted":false,"blurb":"Points Deepgram Voice Agent at the tts-shims OpenAI-compatible proxy so it speaks with a Speechify voice, key held server-side."},{"slug":"vapi-custom-voice","repoPath":"demos/vapi-custom-voice","title":"Vapi custom voice","stack":"Go shim","hosted":false,"blurb":"Points Vapi custom voice at the tts-shims Vapi-compatible proxy so it speaks with Speechify raw PCM, key held server-side."},{"slug":"pipecat-agent-speechify","repoPath":"demos/pipecat-agent-speechify","title":"Pipecat agent","stack":"Python (Pipecat)","hosted":false,"blurb":"Real-time voice pipeline using Pipecat with Deepgram STT, Anthropic Claude, and Speechify TTS through SpeechifyTTSService."},{"slug":"mastra-agent-speechify","repoPath":"demos/mastra-agent-speechify","title":"Mastra voice agent","stack":"TypeScript (Mastra)","hosted":false,"blurb":"Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`."},{"slug":"voice-agent-showcase","repoPath":"demos/voice-agent-showcase","title":"Voice agent capability showcase","stack":"Cloudflare Workers","hosted":false,"blurb":"One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting."},{"slug":"vercel-ai-sdk","repoPath":"demos/vercel-ai-sdk","title":"Vercel AI SDK","stack":"TypeScript (Vercel AI SDK)","hosted":false,"blurb":"Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`."},{"slug":"puter-txt2speech","repoPath":"demos/puter-txt2speech","title":"Speechify TTS in Puter","stack":"HTML (puter.js)","hosted":false,"blurb":"Speaks with a Simba 3.2 voice via the Speechify provider in Puter's puter.ai.txt2speech() — one static page, your key configured once on the Puter instance."},{"slug":"streaming-tts-karaoke","repoPath":"demos/streaming-tts-karaoke","title":"Streaming TTS karaoke","stack":"Next.js","hosted":true,"blurb":"Realtime TTS with word timestamps: each word lights up the instant its audio arrives over the stream, then again as it plays. Key held server-side."}];
 /* DEMOS_DATA:END */
     </script>
     <script>
diff --git a/vercel.json b/vercel.json
index 02f7a4c..f980177 100644
--- a/vercel.json
+++ b/vercel.json
@@ -17,6 +17,10 @@
     "multilingual-voiceover": {
       "root": "demos/multilingual-voiceover/",
       "framework": "nextjs"
+    },
+    "streaming-tts-karaoke": {
+      "root": "demos/streaming-tts-karaoke/",
+      "framework": "nextjs"
     }
   },
   "rewrites": [
@@ -36,6 +40,10 @@
       "source": "/multilingual-voiceover/:path*",
       "destination": { "service": "multilingual-voiceover" }
     },
+    {
+      "source": "/streaming-tts-karaoke/:path*",
+      "destination": { "service": "streaming-tts-karaoke" }
+    },
     {
       "source": "/",
       "destination": {