feat: compact native preview reader with rolling long-text playback

One preview play icon, fixed female01, compact non-modal native controls and direct CORS audio. Start at visible source or double-clicked sentence; support locate, pitch/rate/sleep and pause-aware bounded prefetch. Remove document-wide 20k cap and iframe startup chain; first batch targets 80 codepoints, subsequent 480. Request opt-in pauses for unknown phones without changing originals.

docs/TTS_PILOT.md

@@ -1,22 +1,27 @@
-# CCRD 朗读试点
+# CCRD 简洁朗读
 
-在文章预览上方，可选“朗读选中文字”或“朗读当前预览”。首次点击后才载入
-Hitokoto 的独立 CPU 播放器；文字通过严格限定来源的浏览器消息传入，不放进 URL。
-**载入文字不等于提交合成**：在播放器确认正文、音色、合成语速和试验音高后，
-主动点击“合成并试听”，才分批提交到 Hitokoto API。
+预览只保留一个播放图标：电脑在全屏按钮左边，手机在明暗模式按钮下面。
+点击即从可视正文的最上方开始，右下角出现非模态设置栏，不再嵌入一言的试听页面。
 
-- 选文必须完全在当前预览正文里，含原文 Unicode 与有限相邻读音上下文。
-- 最多两万字；超长请自行选一段，不自动截断、不自动发送整本书。
-- 当前快照开始朗读后，更换搜索词、排序、过滤、打开另一篇或关闭预览不会替换它。
-- 播放器内支持暂停、句段跳读、倍速、睡眠定时、试验音高；高亮是句段级。
-- “收起”或 Escape 保留朗读，“停止并收起”停止。重新载入会要求明确确认替换。
-- 桌面保留搜索可操作；手机播放器独立弹层，收起后恢复预览。
-- 试点播放器不自动读取/保存独立试听页的本机正文书签，页面内可续读。
-- 模型、音色、缓存与任务限制来自 Hitokoto；API 不可用不影响搜索、预览和下载。
-- 旧 Service Worker 客户端可能需第二次刷新/重开，缓存名不变。
-- 实际手机后台、锁屏、自动播放限制、人工听感仍需真机确认，不承诺无缝。
+- 固定女声01。只提供音高、即时语速、睡眠定时、上一句／下一句、暂停／继续、
+  从当前阅读位置开始、回到播放位置。双击正文会选中所在句子并从那里继续播放。
+- 原文保留在搜索页内存，不修改正文或搜索高亮；后端返回原始 UTF-16 句段范围。
+  高亮是句段级，不把播放时间比例冒充逐字定位。“回到播放位置”可重新打开原预览。
+- 去掉整篇两万字限制：首批目标 80 字，后续目标 480 字，每个 API 请求仍最多 800
+  个 Unicode 字符、相邻上下文各最多 32 字。日期和普通英文词不在常规批次边界拆开。
+  只保留当前／下一批任务及一个后续 MP3 预载，不整本上传或生成整本音频。
+- Search 请求显式使用 `unsupported_policy="pause"`：不能发音的字符／符号按短停顿
+  跨过，前后可发音正文继续读，源字符和定位不变。符号段可生成短静音；这不是生僻字
+  发音识别能力。网络、数值歧义、模型故障不冒充“无法识别字符”，保留位置后重试。
+- 语速是浏览器即时倍速，保持音高；音高是后端 -3…+3 半音处理，修改时从当前句段
+  重新生成。暂停时调整音高／选择相邻句不提交任务，直到点击继续。
+- 收起保留播放；× 停止并释放任务。关闭／更换预览、搜索、过滤或主题都不替换声音
+  快照。搜索站不用安装模型，也不访问独立试听页的私密本机书签。
+- 手机设置栏同样不覆盖整屏，保留预览原有键盘隔离。定时采用经过的时间，暂停不
+  顺延；跳读／调整音高不重新计时。实际锁屏／后台由浏览器决定，仍需真机验证。
+- 首批直接 POST，不串行等待 iframe、音色列表、健康检查。预览时只预连接语音域名，
+  不运行固定词预热；精确性能数据需要分别测新音频、缓存和网络入口。
 
-生产搜索站：<https://vomebook-search.hf.space/>；语音服务：
-<https://vomebook-hitokoto.hf.space/tts/>。这次只接入 CCRD，其他三个搜索站未改。
-
-开发/验收命令见 `TESTING.md` 的 CCRD / Hitokoto reader pilot tier。
+服务：<https://vomebook-search.hf.space/>；后端：<https://vomebook-hitokoto.hf.space/tts/>。
+仍只接入 CCRD。Search SW 缓存名不变，前端静态 URL 带版本查询参数以避开旧组件混用。
+测试命令见 `TESTING.md`；不把静音浏览器／窄视口检查称为真人听感或手机锁屏验收。

static/app.js

@@ -1119,6 +1119,10 @@ function previewFullscreenButtonHTML() {
   return `<button type="button" class="icon-btn-sm preview-fullscreen-btn" data-preview-fullscreen aria-label="全屏预览" title="全屏预览" aria-pressed="false">${previewFullscreenIcon(false)}</button>`;
 }
 
+function previewSpeechButtonHTML() {
+  return `<button type="button" class="icon-btn-sm preview-speech-btn" data-speech-toggle aria-label="朗读与设置" title="朗读与设置" aria-controls="speech-panel" aria-expanded="false"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></button>`;
+}
+
 function setPreviewFullscreen(fullscreen, sync = false) {
   const expanded = Boolean(fullscreen && !STATE.isMobile);
   STATE.previewFullscreen = expanded;
@@ -1229,12 +1233,12 @@ async function openPreview(docId, keyword, options = {}) {
           ${textQuality || plainTextLink ? `<div class="preview-path">${escapeHTML(textQuality)}${plainTextLink ? " · " + plainTextLink : ""}</div>` : ""}
         </div>
         <div class="preview-tools">
+          ${previewSpeechButtonHTML()}
           ${previewFullscreenButtonHTML()}
           <button type="button" class="icon-btn-sm" data-action="close-preview" aria-label="关闭预览">×</button>
           <button type="button" class="icon-btn-sm preview-theme-btn" data-action="toggle-preview-theme" aria-label="${STATE.isDark ? "切换到白天模式" : "切换到黑夜模式"}" title="${STATE.isDark ? "白天模式" : "黑夜模式"}">${themeIcon(STATE.isDark)}</button>
         </div>
        </div>
-       <div class="preview-speech-tools"><button type="button" class="text-btn" data-speech="selection">朗读选中文字</button><button type="button" class="text-btn" data-speech="preview">朗读当前预览</button><button type="button" class="text-btn" data-speech="controls">播放器</button></div>
        <pre class="preview-body"></pre>`;
     const previewTitle = DOM.previewPanel.querySelector(".preview-title");
     if (previewTitle) previewTitle.id = "preview-title";
@@ -2250,11 +2254,9 @@ function attachEvents() {
     }
   });
   DOM.previewPanel.addEventListener("click", (event) => {
-    const speech = event.target.closest("[data-speech]");
+    const speech = event.target.closest("[data-speech-toggle]");
     if (speech) {
-      if (speech.dataset.speech === "controls") document.querySelector("#speech-launch")?.click();
-      else if (window.CCRDSpeech) window.CCRDSpeech.read(speech.dataset.speech);
-      else showToast("朗读组件尚未更新，请刷新页面后重试");
+      if (!window.CCRDSpeech) showToast("朗读组件尚未更新，请刷新页面后重试");
       return;
     }
     const closeBtn = event.target.closest("[data-action='close-preview']");
@@ -2268,9 +2270,8 @@ function attachEvents() {
     }
     if (event.target.closest("[data-action='toggle-preview-theme']")) toggleTheme();
   });
-  if (!window.CCRDSpeech) $("#speech-launch")?.addEventListener("click", () => showToast("朗读组件加载失败，请刷新重试；搜索仍可使用"));
   document.addEventListener("keydown", (event) => {
-    if (window.CCRDSpeech?.modal() || window.CCRDSpeech?.owns(event.target)) return;
+    if (window.CCRDSpeech?.modal()) return;
     if (STATE.previewDocId && !DOM.previewPanel.hidden && (previewIsModal() || DOM.previewPanel.contains(event.target))) {
       if (event.key === "Escape") {
         event.preventDefault();

static/index.html

@@ -10,7 +10,7 @@
 <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
 <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
 <script>fetch("/api/ping", { cache: "no-store" }).catch(() => {});</script>
-<link rel="stylesheet" href="/static/style.css">
+<link rel="stylesheet" href="/static/style.css?v=compact-2">
 </head>
 <body class="dark">
 
@@ -51,7 +51,6 @@
         <label class="multi-toggle" id="multi-toggle-label" style="display:none"><input type="checkbox" id="multi-select-toggle"><span>多选</span></label>
       </div>
       <div class="status-right">
-        <button type="button" id="speech-launch" class="text-btn" aria-controls="speech-dialog" aria-expanded="false">朗读</button>
         <button id="clear-filters-btn" class="text-btn" style="display:none">清空筛选</button>
         <div class="sort-group">
           <span class="sort-label">排序:</span>
@@ -148,20 +147,18 @@
 </footer>
 <div id="overlay" class="overlay" style="display:none"></div>
 <div id="toast" class="toast" role="status" aria-live="polite" style="display:none"></div>
-<dialog id="speech-dialog" class="speech-dialog" aria-labelledby="speech-title">
-  <div class="speech-heading">
-    <strong id="speech-title">CPU 朗读（试点）</strong>
-    <button type="button" id="speech-collapse" class="text-btn">收起（保留朗读）</button>
-    <button type="button" id="speech-stop" class="text-btn">停止并收起</button>
-  </div>
-  <p id="speech-status" class="speech-note" role="status">打开后连接 Hitokoto 独立语音服务。</p>
-  <button type="button" id="speech-retry" class="text-btn" hidden>重新连接（停止原朗读）</button>
-  <div id="speech-frame-host"></div>
-  <p class="speech-note">关闭预览或切换搜索不打断朗读。正文通过浏览器交给播放器，点击合成才提交语音 API。手机后台效果待真机确认。</p>
-</dialog>
+<section id="speech-panel" class="speech-panel" aria-label="朗读设置" hidden>
+  <div class="speech-heading"><span id="speech-title">朗读</span><span class="speech-voice">女声01</span><button type="button" id="speech-collapse" class="icon-btn-sm" aria-label="收起朗读设置（继续播放）" title="收起（继续播放）">⌄</button><button type="button" id="speech-stop" class="icon-btn-sm" aria-label="停止朗读" title="停止朗读">×</button></div>
+  <p id="speech-status" class="speech-note" role="status">从当前阅读位置开始</p>
+  <label class="speech-setting" for="speech-pitch"><span>音高</span><input id="speech-pitch" type="range" min="-3" max="3" step="1" value="0"><output id="speech-pitch-value">0</output></label>
+  <label class="speech-setting" for="speech-speed"><span>语速</span><input id="speech-speed" type="range" min="0.5" max="2" step="0.05" value="1"><output id="speech-speed-value">1.0×</output></label>
+  <label class="speech-setting" for="speech-timer"><span>睡眠定时</span><select id="speech-timer"><option value="off">关闭</option><option value="clip">读完当前句</option><option value="5">5 分钟</option><option value="15">15 分钟</option><option value="30">30 分钟</option><option value="60">60 分钟</option></select></label>
+  <div class="speech-transport"><button type="button" id="speech-previous" class="text-btn" aria-label="上一句">上一句</button><button type="button" id="speech-play" class="speech-play">暂停</button><button type="button" id="speech-next" class="text-btn" aria-label="下一句">下一句</button></div>
+  <div class="speech-links"><button type="button" id="speech-visible" class="text-btn">从当前阅读位置开始</button><button type="button" id="speech-locate" class="text-btn">回到播放位置</button></div>
+</section>
 
 <script>if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js", { scope: "/" }); }</script>
-<script src="/static/tts-client.js"></script>
-<script src="/static/app.js"></script>
+<script src="/static/tts-client.js?v=compact-2"></script>
+<script src="/static/app.js?v=compact-2"></script>
 </body>
 </html>

static/style.css

@@ -48,15 +48,27 @@
   color-scheme: dark;
 }
 
-.preview-speech-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; flex-shrink: 0; border-bottom: 1px solid var(--reader-divider); }
-.speech-dialog { position: fixed; inset: auto 12px 12px auto; margin: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 10px; background: var(--surface-container); color: var(--on-surface); border: 1px solid var(--outline); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 180; overflow: auto; user-select: text; }
-.speech-dialog:not([open]) { display: none; }
-.speech-dialog::backdrop { background: rgba(0, 0, 0, .45); }
-.speech-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
-.speech-heading strong { margin-right: auto; }
-.speech-note { font-size: 12px; color: var(--on-surface-variant); margin: 8px 0; overflow-wrap: anywhere; }
-#speech-frame-host iframe { display: block; width: 100%; height: min(62dvh, 660px); min-height: 220px; border: 0; background: var(--surface); }
-body.mobile .speech-dialog { inset: 12px; width: auto; margin: auto; max-width: 650px; }
+.speech-panel { position: fixed; inset: auto 16px 16px auto; width: min(320px, calc(100vw - 24px)); padding: 12px; color: var(--on-surface); background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 180; max-height: calc(100dvh - 24px); overflow: auto; }
+.speech-panel[hidden] { display: none; }
+.speech-heading { display: flex; align-items: center; gap: 4px; }
+#speech-title { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.speech-voice, .speech-note { color: var(--on-surface-variant); font-size: 11px; }
+.speech-note { margin: 4px 0 10px; min-height: 16px; }
+.speech-setting { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 12px; }
+.speech-setting > span { min-width: 4em; }
+.speech-setting input, .speech-setting select { flex: 1; min-width: 0; accent-color: var(--primary); }
+.speech-setting output { min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
+.speech-setting select { padding: 4px 6px; color: var(--on-surface); background: var(--surface-variant); border: 1px solid var(--outline-variant); border-radius: 6px; }
+.speech-transport, .speech-links { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
+.speech-play { color: var(--on-primary); background: var(--primary); border-radius: 20px; padding: 7px 24px; font-size: 12px; }
+.speech-panel button:disabled { opacity: .4; cursor: default; }
+.speech-links .text-btn { font-size: 11px; padding: 4px 2px; }
+.preview-speech-btn svg { width: 18px; height: 18px; }
+.preview-speech-btn.speech-active { color: var(--primary); }
+body.mobile .preview-speech-btn { order: 4; }
+body.mobile .speech-panel { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
+.preview-body::highlight(ccrd-speech) { background: var(--reader-mark); color: var(--reader-on-mark); text-decoration: underline; }
+.preview-body .speech-current { text-decoration: underline; }
 
 body.light {
   --surface: #fdfbff;

static/tts-client.js

@@ -1,191 +1,484 @@
 "use strict";
-// CCRD pilot: shared Hitokoto player in a persistent, isolated browsing context.
-// No model code, browser speechSynthesis, remote text URLs or automatic TTS POSTs.
-window.CCRDSpeech = (() => {
+// Pure, bounded rolling source planner. All offsets refer to original UTF-16.
+globalThis.CCRDSpeechPlan = (() => {
+  const ending = /[。！？!?；;\n]/u;
+  const closers = /[”’"'」』）)\t \r]/u;
+  const ascii = /[A-Za-z0-9]/u;
+  function safe(text, offset) {
+    offset = Math.max(0, Math.min(text.length, Math.floor(offset)));
+    return offset && /[\uDC00-\uDFFF]/u.test(text[offset] || "") && /[\uD800-\uDBFF]/u.test(text[offset - 1]) ? offset - 1 : offset;
+  }
+  function boundary(text, index) {
+    return ending.test(text[index]) || (text[index] === "." && !ascii.test(text[index + 1] || ""));
+  }
+  function sentence(text, offset) {
+    offset = safe(text, offset);
+    // Navigation examines nearby source, not a document-sized sentence/DOM list.
+    let start = offset;
+    while (start > 0 && offset - start < 4096 && !boundary(text, start - 1)) start -= 1;
+    while (start < offset && /[\s”’"'」』）)]/u.test(text[start])) start += 1;
+    let end = Math.max(start, offset);
+    while (end < text.length && end - offset < 4096) {
+      const finish = boundary(text, end++);
+      if (finish) break;
+    }
+    while (end < text.length && closers.test(text[end])) end += 1;
+    return { start: safe(text, start), end: safe(text, end) };
+  }
+  function batch(text, offset, first = false) {
+    const start = safe(text, offset), limit = first ? 80 : 480;
+    if (start >= text.length) return null;
+    const chars = Array.from(text.slice(start, start + 1800)), offsets = [start];
+    for (const char of chars) offsets.push(offsets[offsets.length - 1] + char.length);
+    let end = Math.min(limit, chars.length);
+    if (offsets[end] < text.length) {
+      for (let index = end - 1; index >= Math.floor(limit / 2); index -= 1) {
+        if (boundary(text, offsets[index])) { end = index + 1; break; }
+      }
+      // Dates, versions, identifiers and words remain whole across API batches.
+      const atoms = /(?:[0-9]{4}年[0-9]{1,2}月[0-9]{1,2}[日号]|[0-9]{4}年|[A-Za-z0-9]+(?:[._/\-][A-Za-z0-9]+)*)/gu;
+      for (const match of text.slice(start, offsets[Math.min(chars.length, 800)]).matchAll(atoms)) {
+        const begin = start + match.index, stop = begin + match[0].length;
+        if (begin < offsets[end] && offsets[end] < stop) {
+          const target = begin > start ? begin : stop;
+          const found = offsets.indexOf(target);
+          if (found > 0 && found <= 800) end = found;
+          break;
+        }
+      }
+    }
+    const stop = offsets[end];
+    return { start, end: stop, text: text.slice(start, stop),
+      context_before: Array.from(text.slice(Math.max(0, start - 64), start)).slice(-32).join(""),
+      context_after: Array.from(text.slice(stop, stop + 64)).slice(0, 32).join("") };
+  }
+  return { safe, sentence, batch };
+})();
+
+if (typeof document !== "undefined") window.CCRDSpeech = (() => {
   const ORIGIN = "https://vomebook-hitokoto.hf.space";
-  const PLAYER = ORIGIN + "/tts/?embed=ccrd-v1";
-  const $ = (selector) => document.querySelector(selector);
-  const dialog = $("#speech-dialog");
-  const host = $("#speech-frame-host");
-  const status = $("#speech-status");
-  const launch = $("#speech-launch");
-  const collapse = $("#speech-collapse");
-  const stopButton = $("#speech-stop");
-  const retry = $("#speech-retry");
-  if (!dialog || !host || !launch) return null; // Older cached HTML stays usable.
-  let frame = null, channel = "", connected = false, timeout, modalActive = false;
-  let pending = null, currentPreview = null, selected = null, focusReturn = null;
+  const plan = CCRDSpeechPlan;
+  const $ = selector => document.querySelector(selector);
+  const panel = $("#speech-panel");
+  if (!panel) return null; // Mixed cached shells must still search normally.
+  const status = $("#speech-status"), play = $("#speech-play");
+  const previous = $("#speech-previous"), next = $("#speech-next");
+  const pitch = $("#speech-pitch"), speed = $("#speech-speed"), timer = $("#speech-timer");
+  const visible = $("#speech-visible"), locate = $("#speech-locate");
+  const collapse = $("#speech-collapse"), stopButton = $("#speech-stop");
+  let preview = null, owner = null, saved = null, audio = null, preloader = null, switching = false;
+  let sleepDeadline = 0, finishClip = false, sleepTimer;
+  let marked = null;
 
-  function notice(message) {
-    status.textContent = message;
-    if (typeof showToast === "function") showToast(message, 4000);
+  function notice(text) { status.textContent = text; }
+  function live(value) { return owner === value && !value.cancelled; }
+  function nonce() { return Array.from(crypto.getRandomValues(new Uint8Array(24)), value => value.toString(16).padStart(2, "0")).join(""); }
+  function release(id, keepalive = false) {
+    if (id) fetch(`${ORIGIN}/tts/jobs/${encodeURIComponent(id)}`, { method: "DELETE", credentials: "omit", keepalive }).catch(() => {});
   }
-  function token() {
-    return Array.from(crypto.getRandomValues(new Uint8Array(24)), (value) => value.toString(16).padStart(2, "0")).join("");
+  function clearPreload() { if (preloader?.hasAttribute("src")) { preloader.removeAttribute("src"); preloader.load(); } }
+  function discard(value, job) {
+    job.cancelled = true;
+    value.jobs.delete(job.batch.start);
+    release(job.id);
   }
-  function send(type, data = {}) {
-    frame?.contentWindow?.postMessage({ type, channel, ...data }, ORIGIN);
+  function clearSleep() {
+    clearTimeout(sleepTimer); sleepDeadline = 0; finishClip = false; timer.value = "off";
   }
-  function theme() { if (connected) send("ccrd-reader-theme", { dark: !document.body.classList.contains("light") }); }
-  function modal() { return dialog.open && modalActive; }
-  function owns(node) { return !!node && dialog.contains(node); }
-  function outerControls() {
-    return Array.from(dialog.querySelectorAll("button, a[href]")).filter(node => !node.disabled && !node.hidden && node.getClientRects().length);
+  function checkSleep() {
+    if (sleepDeadline && Date.now() >= sleepDeadline) { stop("睡眠定时已结束，可继续朗读"); return true; }
+    return false;
   }
-  function show() {
-    if (!dialog.open) {
-      focusReturn = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-      if (document.body.classList.contains("mobile")) dialog.showModal();
-      else dialog.show();
-      modalActive = document.body.classList.contains("mobile");
+  function armSleep() {
+    clearTimeout(sleepTimer);
+    sleepDeadline = timer.value !== "off" && timer.value !== "clip" ? Date.now() + Number(timer.value) * 60000 : 0;
+    finishClip = timer.value === "clip";
+    if (finishClip && owner) {
+      clearPreload();
+      for (const job of Array.from(owner.jobs.values())) if (job.batch.start !== owner.batch.start && job.state !== "ready") discard(owner, job);
     }
-    launch.setAttribute("aria-expanded", "true");
-    collapse.focus({ preventScroll: true });
-    if (!frame) createFrame();
-    else if (connected) send("ccrd-reader-layout", { modal: modal() });
+    function tickSleep() { if (!checkSleep() && sleepDeadline) sleepTimer = setTimeout(tickSleep, Math.min(1000, sleepDeadline - Date.now())); }
+    tickSleep();
+  }
+  function show() {
+    const parent = preview?.body?.isConnected ? preview.body.parentElement : document.body;
+    if (panel.parentElement !== parent) parent.append(panel);
+    panel.hidden = false;
+    $("[data-speech-toggle]")?.setAttribute("aria-expanded", "true");
   }
   function hide() {
-    if (dialog.open) dialog.close();
-    modalActive = false;
-    if (connected) send("ccrd-reader-layout", { modal: false });
-    launch.setAttribute("aria-expanded", "false");
-    const previous = focusReturn;
-    if (previous?.isConnected && !previous.closest("[inert]")) previous.focus({ preventScroll: true });
-    else if (!launch.closest("[inert]")) launch.focus({ preventScroll: true });
-  }
-  function createFrame() {
-    clearTimeout(timeout);
-    connected = false;
-    channel = token();
-    frame = document.createElement("iframe");
-    frame.id = "speech-frame";
-    frame.title = "Hitokoto CPU 朗读播放器";
-    frame.allow = "autoplay";
-    frame.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
-    frame.referrerPolicy = "no-referrer";
-    frame.addEventListener("load", () => {
-      connected = false;
-      send("ccrd-reader-init", { version: 1, modal: modal() });
+    panel.hidden = true;
+    const button = $("[data-speech-toggle]");
+    button?.setAttribute("aria-expanded", "false");
+    if (panel.contains(document.activeElement) && button?.isConnected) button.focus({ preventScroll: true });
+  }
+  function controls() {
+    play.textContent = owner?.wantsPlay ? "暂停" : owner?.blocked ? "重试" : "继续";
+    play.setAttribute("aria-label", play.textContent + "朗读");
+    play.disabled = !owner && !saved;
+    previous.disabled = !owner || owner.position <= 0;
+    next.disabled = !owner || owner.position >= owner.snapshot.text.length;
+    visible.disabled = !preview;
+    locate.disabled = !owner && !saved;
+    $("#speech-pitch-value").textContent = (Number(pitch.value) > 0 ? "+" : "") + pitch.value;
+    $("#speech-speed-value").textContent = Number(speed.value).toFixed(2).replace(/0$/, "") + "×";
+    const button = $("[data-speech-toggle]");
+    if (button) {
+      button.setAttribute("aria-expanded", String(!panel.hidden));
+      button.classList.toggle("speech-active", !!owner && owner.snapshot.id === preview?.id);
+    }
+  }
+  function sourceRange(start, end = start + 1) {
+    if (!preview || preview.body.textContent !== preview.text) return null;
+    const range = document.createRange(), walker = document.createTreeWalker(preview.body, NodeFilter.SHOW_TEXT);
+    let node, offset = 0, begun = false;
+    while ((node = walker.nextNode())) {
+      if (!begun && start < offset + node.length) { range.setStart(node, start - offset); begun = true; }
+      if (begun && end <= offset + node.length) { range.setEnd(node, end - offset); return range; }
+      offset += node.length;
+    }
+    return null;
+  }
+  function clearMark() {
+    if (globalThis.CSS?.highlights) CSS.highlights.delete("ccrd-speech");
+    for (const node of marked || []) node.replaceWith(...node.childNodes);
+    marked = null;
+  }
+  function mark() {
+    clearMark();
+    if (!owner?.current || preview?.id !== owner.snapshot.id) return;
+    const start = owner.current.job.batch.start + owner.current.part.start;
+    const end = owner.current.job.batch.start + owner.current.part.end;
+    const range = sourceRange(start, end);
+    if (!range) return;
+    if (globalThis.CSS?.highlights && globalThis.Highlight) CSS.highlights.set("ccrd-speech", new Highlight(range));
+    else {
+      const node = document.createElement("mark"); node.className = "speech-current";
+      node.append(range.extractContents()); range.insertNode(node); marked = [node];
+    }
+  }
+  function offsetAtPoint(x, y) {
+    const point = document.caretPositionFromPoint?.(x, y);
+    const range = !point && document.caretRangeFromPoint?.(x, y);
+    const node = point?.offsetNode || range?.startContainer, offset = point?.offset ?? range?.startOffset;
+    if (!node || !preview?.body.contains(node)) return null;
+    const prefix = document.createRange(); prefix.selectNodeContents(preview.body); prefix.setEnd(node, offset);
+    return plan.safe(preview.text, prefix.toString().length);
+  }
+  function visibleOffset() {
+    if (!preview) return 0;
+    const body = preview.body, box = body.getBoundingClientRect(), style = getComputedStyle(body);
+    const top = Math.max(box.top, 0, body.parentElement.querySelector(".preview-header")?.getBoundingClientRect().bottom || 0);
+    const bottom = Math.min(box.bottom, innerHeight);
+    if (bottom <= top) return 0;
+    const x = Math.max(1, box.left + parseFloat(style.paddingLeft) + 1);
+    // At the top line's leading edge, not at the pointer or the document start.
+    for (let y = top + 2; y < Math.min(bottom, top + parseFloat(style.lineHeight) + parseFloat(style.paddingTop) + 8); y += 3) {
+      const offset = offsetAtPoint(x, y);
+      if (offset !== null) {
+        const range = sourceRange(offset, Math.min(preview.text.length, offset + (preview.text.codePointAt(offset) > 65535 ? 2 : 1)));
+        const rect = range?.getBoundingClientRect();
+        if (rect?.height && rect.bottom > top && rect.top < bottom) return offset;
+      }
+    }
+    return 0;
+  }
+  async function locateSource() {
+    const value = owner || saved;
+    if (!value) return;
+    const position = value.position, snapshot = value.snapshot;
+    if (preview?.id !== snapshot.id) {
+      if (typeof openPreview !== "function") return;
+      await openPreview(snapshot.id, "", { scroll: false });
+    }
+    if (preview?.id !== snapshot.id) return;
+    const range = sourceRange(Math.min(position, preview.text.length - 1));
+    const rect = range?.getBoundingClientRect();
+    if (rect) {
+      const box = preview.body.getBoundingClientRect();
+      preview.body.scrollTop += rect.top - box.top - Math.min(80, box.height / 3);
+      if (box.bottom < 0 || box.top > innerHeight) preview.body.scrollIntoView({ block: "nearest" });
+      mark();
+    }
+  }
+  function pause() {
+    if (!owner) return;
+    owner.wantsPlay = false;
+    clearPreload();
+    for (const job of Array.from(owner.jobs.values())) if (job.batch.start !== owner.batch.start && job.state !== "ready") discard(owner, job);
+    audio.pause(); notice("已暂停"); controls();
+  }
+  function stop(message = "已停止，可继续朗读", keepalive = false) {
+    const value = owner;
+    if (value) {
+      saved = { snapshot: value.snapshot, position: value.position };
+      value.cancelled = true; clearTimeout(value.timer);
+      for (const controller of value.controllers) if (!controller.createsJob) controller.abort();
+      for (const job of value.jobs.values()) release(job.id, keepalive);
+    }
+    owner = null;
+    clearSleep(); clearPreload(); switching = true;
+    if (audio) { audio.pause(); audio.removeAttribute("src"); audio.load(); }
+    if ("mediaSession" in navigator) navigator.mediaSession.playbackState = "none";
+    notice(message); controls();
+  }
+  function createAudio() {
+    if (audio) return;
+    audio = new Audio(); audio.id = "speech-audio"; audio.preload = "auto"; audio.hidden = true;
+    audio.crossOrigin = "anonymous"; document.body.append(audio);
+    preloader = new Audio(); preloader.preload = "auto"; preloader.crossOrigin = "anonymous";
+    audio.addEventListener("loadedmetadata", () => {
+      if (!owner?.current || checkSleep()) return;
+      switching = false; applyRate();
+      if (owner.wantsPlay) playAudio(owner);
+    });
+    audio.addEventListener("ended", () => {
+      const value = owner;
+      if (!value?.current || checkSleep()) return;
+      value.position = value.current.job.batch.start + value.current.part.end;
+      value.part += 1; value.current = null;
+      if (finishClip) { stop("本句已读完，睡眠定时结束"); return; }
+      advance(value); pump(value);
     });
-    frame.src = PLAYER; // Text/title/capabilities never go in the URL.
-    host.replaceChildren(frame);
-    status.textContent = "正在连接独立语音播放器，搜索和预览仍可使用…";
-    retry.hidden = true;
-    timeout = setTimeout(() => {
-      if (!connected) {
-        status.textContent = "播放器连接失败或仍在加载。可重连；不会影响搜索和原文预览。";
-        retry.hidden = false;
+    audio.addEventListener("pause", () => {
+      if (owner && !switching && !audio.ended && owner.wantsPlay) pause();
+    });
+    audio.addEventListener("error", () => {
+      if (!owner?.current || !audio.hasAttribute("src")) return;
+      owner.blocked = true; pause(); notice("音频连接中断，点击继续重试，不跳过正文"); controls();
+    });
+    audio.addEventListener("timeupdate", checkSleep);
+  }
+  function applyRate() {
+    if (!audio) return;
+    audio.defaultPlaybackRate = audio.playbackRate = Number(speed.value);
+    if ("preservesPitch" in audio) audio.preservesPitch = true;
+  }
+  function playAudio(value) {
+    if (!live(value) || !value.wantsPlay || checkSleep()) return;
+    const current = value.current;
+    audio.play().catch(() => {
+      if (!live(value) || current !== value.current) return;
+      pause(); notice("音频已就绪，请点击继续播放");
+    });
+    if ("mediaSession" in navigator) navigator.mediaSession.playbackState = "playing";
+  }
+  async function request(path, options, value) {
+    const controller = new AbortController(); controller.createsJob = options?.method === "POST";
+    value.controllers.add(controller);
+    const timeout = setTimeout(() => controller.abort(), 15000);
+    try {
+      const response = await fetch(ORIGIN + path, { ...options, signal: controller.signal, cache: "no-store", credentials: "omit" });
+      const data = await response.json();
+      if (!response.ok) {
+        const error = new Error(data.error?.message || `语音请求失败（${response.status}）`);
+        error.status = response.status; error.retryAfter = Math.max(2, Math.min(30, Number(response.headers.get("Retry-After")) || 5));
+        throw error;
       }
-    }, 20000);
+      return data;
+    } finally { clearTimeout(timeout); value.controllers.delete(controller); }
   }
-  function flush() {
-    if (!connected || !pending) return;
-    const payload = pending;
-    pending = null;
-    send("ccrd-reader-import", payload);
+  function newJob(batch) { return { batch, id: "", nonce: nonce(), parts: [], state: "new", retryAt: 0, failures: 0, deadline: Date.now() + 600000 }; }
+  function accept(job, data, value) {
+    if (!/^[A-Za-z0-9_-]{32}$/u.test(data.id) || (job.id && job.id !== data.id)) throw new Error("语音任务标识无效");
+    job.id = data.id;
+    if (data.state === "error") throw new Error(data.error?.message || "语音合成失败，正文未跳过");
+    if (["expired", "cancelled"].includes(data.state)) { const error = new Error("语音任务已过期"); error.status = 410; throw error; }
+    const parts = data.progress?.parts || [];
+    if (!Array.isArray(parts) || parts.length > 64 || (data.result?.pitch_semitones ?? value.pitch) !== value.pitch) throw new Error("语音分段信息无效");
+    if (data.progress && (!Number.isInteger(data.progress.total_parts) || data.progress.total_parts < 1 ||
+        data.progress.total_parts > 64 || parts.length > data.progress.total_parts)) throw new Error("语音分段总数无效");
+    let end = 0;
+    for (let index = 0; index < parts.length; index += 1) {
+      const part = parts[index];
+      if (part.index !== index || part.start !== end || !Number.isInteger(part.end) || part.end <= end || part.end > job.batch.text.length ||
+          (part.pitch_semitones ?? 0) !== value.pitch || part.audio_url !== `/tts/audio/${job.id}/parts/${index}.mp3`) throw new Error("语音分段未连续保留原文");
+      end = part.end;
+      if (job.parts[index] && (job.parts[index].start !== part.start || job.parts[index].end !== part.end)) throw new Error("已发布语音的原文范围发生变化");
+    }
+    if (data.state === "ready" && (end !== job.batch.text.length || parts.length !== data.progress?.total_parts)) throw new Error("语音未完整覆盖当前正文");
+    job.parts = parts; job.state = data.state;
   }
-  function previewLoaded(value) {
-    currentPreview = value;
-    selected = null;
-  }
-  function previewClosed() { currentPreview = null; selected = null; }
-  function selection() {
-    const body = $("#preview-panel .preview-body");
-    const value = window.getSelection();
-    if (!currentPreview || !body || !value || value.rangeCount !== 1) { selected = null; return; }
-    if (value.isCollapsed) {
-      if (!document.activeElement?.matches("[data-speech='selection']")) selected = null;
-      return;
-    }
-    const range = value.getRangeAt(0);
-    if (!body.contains(range.startContainer) || !body.contains(range.endContainer)) { selected = null; return; }
-    const prefix = range.cloneRange();
-    prefix.selectNodeContents(body);
-    prefix.setEnd(range.startContainer, range.startOffset);
-    const start = prefix.toString().length;
-    const text = range.toString();
-    if (currentPreview.text.slice(start, start + text.length) === text) selected = { id: currentPreview.id, start, text };
-  }
-  function read(mode) {
-    selection();
-    if (!currentPreview) { notice("预览仍在加载，请等待正文出现后重试"); return; }
-    let text = currentPreview.text, before = "", after = "";
-    if (mode === "selection") {
-      if (!selected || selected.id !== currentPreview.id || !selected.text.trim()) {
-        notice("请先在当前预览正文内选中要朗读的文字"); return;
+  async function update(value, job) {
+    if (!live(value) || job.cancelled || !value.wantsPlay || job.state === "ready" || job.blocked || Date.now() < job.retryAt || checkSleep()) return;
+    try {
+      if (Date.now() > job.deadline) throw new Error("语音排队超时，点击继续重试");
+      const data = job.id ? await request(`/tts/jobs/${job.id}`, {}, value) : await request("/tts/jobs", { method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text: job.batch.text, voice: "zf_001", speed: 1, pitch_semitones: value.pitch,
+          unsupported_policy: "pause", progressive: true, context_before: job.batch.context_before,
+          context_after: job.batch.context_after, request_id: job.nonce }) }, value);
+      if (!live(value) || job.cancelled || value.jobs.get(job.batch.start) !== job) { release(data.id); return; }
+      accept(job, data, value); job.failures = 0; job.retryAt = Date.now() + (job.parts.length ? 650 : 250);
+    } catch (error) {
+      if (!live(value) || job.cancelled) return;
+      job.failures += 1;
+      const transient = [404, 410, 429, 503].includes(error.status) || error.name === "AbortError" || error instanceof TypeError;
+      job.retryAt = Date.now() + 1000 * (error.retryAfter || Math.min(20, 2 ** job.failures));
+      job.message = error.message;
+      if ([404, 410].includes(error.status)) {
+        release(job.id); job.id = ""; job.nonce = nonce(); job.state = "new";
+        if (job === value.jobs.get(value.batch.start)) { job.blocked = true; }
+      }
+      job.blocked = job.blocked || !transient || job.failures >= 3;
+      if (job.batch.start === value.batch.start) {
+        if (job.blocked) { value.blocked = true; pause(); }
+        notice(error.message + (job.blocked ? " · 点击继续重试" : " · 稍后重试，进度保留"));
+      }
+      controls();
+    }
+  }
+  function advance(value) {
+    if (!live(value) || !value.wantsPlay || value.blocked || checkSleep()) return;
+    let job = value.jobs.get(value.batch.start);
+    if (!job) return;
+    if (job.blocked) { value.blocked = true; pause(); notice(job.message || "下一段暂未就绪，点击继续重试"); return; }
+    if (!value.current) {
+      const part = job.parts[value.part];
+      if (part) {
+        value.current = { job, part }; value.position = job.batch.start + part.start;
+        switching = true; audio.src = ORIGIN + part.audio_url; audio.load(); applyRate();
+        notice("朗读中"); mark(); controls();
+      } else if (job.state === "ready") {
+        value.position = job.batch.end;
+        discard(value, job);
+        if (value.position >= value.snapshot.text.length) { stop("已读完全文"); saved = null; controls(); return; }
+        value.batch = plan.batch(value.snapshot.text, value.position);
+        value.part = 0;
+        if (!value.jobs.has(value.batch.start)) value.jobs.set(value.batch.start, newJob(value.batch));
+        advance(value); return;
+      }
+    }
+    // One following API batch and one following immutable MP3 only. No work on
+    // pause, no document-wide plan/DOM/audio cache and no whole-book POST.
+    if (!finishClip && value.current && job.state === "ready" && job.batch.end < value.snapshot.text.length && !value.jobs.has(job.batch.end)) {
+      const batch = plan.batch(value.snapshot.text, job.batch.end);
+      value.jobs.set(batch.start, newJob(batch));
+    }
+    const following = !finishClip && (job.parts[value.part + 1] || value.jobs.get(job.batch.end)?.parts[0]);
+    if (following && preloader.getAttribute("src") !== ORIGIN + following.audio_url) preloader.src = ORIGIN + following.audio_url;
+  }
+  async function pump(value) {
+    if (!live(value) || value.ticking || checkSleep() || !value.wantsPlay) return;
+    clearTimeout(value.timer); value.ticking = true;
+    try {
+      const current = value.jobs.get(value.batch.start);
+      if (current) await update(value, current);
+      advance(value); // Never wait for speculative work before playing a part.
+      if (!live(value) || !value.wantsPlay) return;
+      for (const job of Array.from(value.jobs.values())) if (job.batch.start !== current?.batch.start) {
+        await update(value, job); advance(value);
       }
-      text = selected.text;
-      before = Array.from(currentPreview.text.slice(Math.max(0, selected.start - 128), selected.start)).slice(-32).join("");
-      after = Array.from(currentPreview.text.slice(selected.start + text.length, selected.start + text.length + 128)).slice(0, 32).join("");
-    }
-    let count = 0;
-    for (const _ of text) { if (++count > 20000) break; }
-    if (count > 20000) { notice("单次朗读最多两万字，请选中较短的一部分；不会截掉正文"); return; }
-    if (!text.trim()) { notice("当前预览没有可朗读正文"); return; }
-    pending = { text, title: String(currentPreview.title || "当前预览").slice(0, 200),
-      context_before: before, context_after: after };
-    show();
-    flush();
-  }
-  document.addEventListener("selectionchange", selection);
-  window.addEventListener("message", (event) => {
-    const data = event.data;
-    if (event.origin !== ORIGIN || event.source !== frame?.contentWindow || !data || data.channel !== channel) return;
-    if (data.type === "ccrd-reader-ready" && data.version === 1) {
-      clearTimeout(timeout);
-      connected = true;
-      retry.hidden = true;
-      theme();
-      status.textContent = "播放器已连接。载入正文后，确认文字并点击合成才向语音 API 提交。";
-      flush();
-    } else if (data.type === "ccrd-reader-loaded") {
-      status.textContent = `已载入 ${data.characters} 字。请在播放器确认文字、音色和音高后点击合成。`;
-    } else if (data.type === "ccrd-reader-rejected") {
-      status.textContent = "未替换正在朗读的文字；原朗读保留。";
-    } else if (data.type === "ccrd-reader-pending") {
-      status.textContent = "播放器正在朗读，请在播放器中选择替换文字或保留原朗读。";
-    } else if (data.type === "ccrd-reader-stopped") {
-      status.textContent = "朗读已停止，可收起或重新载入文字。";
-    } else if (data.type === "ccrd-reader-collapse") {
-      hide();
-    } else if (data.type === "ccrd-reader-focus-out" && modal() && typeof data.reverse === "boolean") {
-      const buttons = outerControls();
-      (data.reverse ? buttons[buttons.length - 1] : buttons[0])?.focus();
+    } finally {
+      value.ticking = false;
+      if (live(value) && value.wantsPlay) value.timer = setTimeout(() => pump(value), value.current ? 600 : 250);
     }
+  }
+  function start(snapshot, offset, playing = true) {
+    createAudio();
+    const mode = timer.value, deadline = sleepDeadline;
+    stop("正在准备首句…");
+    const batch = plan.batch(snapshot.text, offset, true);
+    if (!batch) { notice("已到正文末尾"); return; }
+    const value = { snapshot, batch, position: batch.start, part: 0, current: null, pitch: Number(pitch.value), wantsPlay: playing,
+      jobs: new Map(), controllers: new Set(), cancelled: false, blocked: false };
+    value.jobs.set(batch.start, newJob(batch)); owner = value; saved = null;
+    timer.value = mode; armSleep();
+    if (deadline) { sleepDeadline = deadline; if (checkSleep()) return; }
+    $("#speech-title").textContent = snapshot.title || "朗读";
+    show(); notice(playing ? "正在准备首句…" : "已选择句子，点击继续播放"); controls();
+    if ("mediaSession" in navigator && "MediaMetadata" in globalThis) navigator.mediaSession.metadata = new MediaMetadata({ title: snapshot.title, artist: "女声01" });
+    pump(value); // First POST directly; no iframe, voices or health round-trips.
+  }
+  function fromPreview(offset = visibleOffset()) {
+    if (!preview || !preview.text.trim()) { if (typeof showToast === "function") showToast("请等待预览正文加载完成"); return; }
+    if (owner && owner.snapshot.id !== preview.id && !confirm("切换到当前预览会停止原朗读，继续吗？")) return;
+    start({ id: preview.id, text: preview.text, title: preview.title }, offset);
+  }
+  function resume() {
+    if (checkSleep()) return;
+    if (!owner) { if (saved) start(saved.snapshot, saved.position); return; }
+    if (owner.blocked || owner.settingsChanged) { start(owner.snapshot, owner.position); return; }
+    owner.wantsPlay = true; notice("正在继续…"); controls();
+    if (owner.current) playAudio(owner);
+    advance(owner); pump(owner);
+  }
+  function launch() {
+    if (!owner || owner.snapshot.id !== preview?.id) {
+      if (!owner && saved?.snapshot.id === preview?.id) start(saved.snapshot, saved.position);
+      else fromPreview();
+    } else { show(); if (!owner.wantsPlay) resume(); }
+  }
+  function navigate(direction) {
+    if (!owner) return;
+    const sentence = plan.sentence(owner.snapshot.text, owner.position);
+    const target = direction > 0 ? sentence.end : plan.sentence(owner.snapshot.text, Math.max(0, sentence.start - 1)).start;
+    if (target < owner.snapshot.text.length) start(owner.snapshot, target, owner.wantsPlay);
+  }
+  function previewLoaded(value) {
+    clearMark();
+    preview = { ...value, body: $("#preview-panel .preview-body") };
+    if (!preview.body) { preview = null; return; }
+    // Older cached app.js may still produce the former three-button toolbar.
+    $(".preview-speech-tools")?.remove();
+    const tools = $("#preview-panel .preview-tools");
+    if (tools && !tools.querySelector("[data-speech-toggle]")) {
+      const button = document.createElement("button"); button.type = "button"; button.className = "icon-btn-sm preview-speech-btn";
+      button.dataset.speechToggle = ""; button.setAttribute("aria-label", "朗读与设置"); button.setAttribute("aria-controls", "speech-panel");
+      button.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>';
+      tools.prepend(button);
+    }
+    arrangeToggle();
+    if (!panel.hidden) show();
+    mark(); controls();
+    // Establish the TLS connection while reading the preview, not with an
+    // expensive fixed-query/model warmup or speculative synthesis.
+    if (!$("link[data-speech-connect]")) {
+      const link = document.createElement("link"); link.rel = "preconnect"; link.href = ORIGIN; link.crossOrigin = "anonymous";
+      link.dataset.speechConnect = ""; document.head.append(link);
+    }
+  }
+  function previewClosed() { clearMark(); preview = null; if (panel.parentElement !== document.body) document.body.append(panel); controls(); }
+  function arrangeToggle() {
+    const button = $("[data-speech-toggle]"), tools = button?.parentElement;
+    if (!tools) return;
+    if (document.body.classList.contains("mobile")) tools.append(button);
+    else tools.prepend(button);
+  }
+  new MutationObserver(arrangeToggle).observe(document.body, { attributes: true, attributeFilter: ["class"] });
+  document.addEventListener("click", event => { if (event.target.closest("[data-speech-toggle]")) launch(); });
+  document.addEventListener("dblclick", event => {
+    if (!preview?.body.contains(event.target)) return;
+    const offset = offsetAtPoint(event.clientX, event.clientY);
+    if (offset === null) return;
+    const sentence = plan.sentence(preview.text, offset);
+    const range = sourceRange(sentence.start, sentence.end);
+    if (range) { const selection = getSelection(); selection.removeAllRanges(); selection.addRange(range); }
+    fromPreview(sentence.start);
   });
-  launch.addEventListener("click", show);
+  play.addEventListener("click", () => { if (owner?.wantsPlay) pause(); else resume(); });
+  previous.addEventListener("click", () => navigate(-1));
+  next.addEventListener("click", () => navigate(1));
+  visible.addEventListener("click", () => fromPreview());
+  locate.addEventListener("click", locateSource);
   collapse.addEventListener("click", hide);
-  stopButton.addEventListener("click", () => {
-    if (connected) send("ccrd-reader-stop");
-    else { clearTimeout(timeout); frame?.remove(); frame = null; connected = false; pending = null; }
-    hide();
-  });
-  retry.addEventListener("click", () => {
-    if (!confirm("重新连接会停止此播放器中尚未完成的朗读，是否继续？")) return;
-    frame?.remove();
-    frame = null;
-    createFrame();
+  stopButton.addEventListener("click", () => { stop(); clearMark(); hide(); });
+  pitch.addEventListener("input", controls);
+  pitch.addEventListener("change", () => {
+    if (!owner) return;
+    if (owner.wantsPlay) start(owner.snapshot, owner.position);
+    else { owner.settingsChanged = true; notice("音高已调整，点击继续后从当前句重新生成"); }
   });
-  dialog.addEventListener("cancel", (event) => { event.preventDefault(); hide(); });
-  dialog.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); hide(); }
-    if (event.key === "Tab" && modal() && connected) {
-      const buttons = outerControls();
-      if (event.shiftKey && event.target === buttons[0]) {
-        event.preventDefault(); send("ccrd-reader-focus", { last: true });
-      } else if (!event.shiftKey && event.target === buttons[buttons.length - 1]) {
-        event.preventDefault(); send("ccrd-reader-focus", { last: false });
-      }
+  speed.addEventListener("input", () => { applyRate(); controls(); });
+  timer.addEventListener("change", armSleep);
+  panel.addEventListener("keydown", event => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); hide(); } });
+  window.addEventListener("pagehide", () => stop("已停止", true));
+  document.addEventListener("visibilitychange", checkSleep);
+  window.addEventListener("online", () => { if (owner?.wantsPlay) pump(owner); });
+  if ("mediaSession" in navigator) {
+    for (const [action, handler] of Object.entries({ play: resume, pause, stop: () => stop(), previoustrack: () => navigate(-1), nexttrack: () => navigate(1) })) {
+      try { navigator.mediaSession.setActionHandler(action, handler); } catch (_) { /* Optional. */ }
     }
-  });
-  new MutationObserver(() => {
-    theme();
-    if (dialog.open) {
-      const targetModal = document.body.classList.contains("mobile");
-      if (modal() !== targetModal) { dialog.close(); targetModal ? dialog.showModal() : dialog.show(); modalActive = targetModal; }
-      if (connected) send("ccrd-reader-layout", { modal: modal() });
-    }
-  }).observe(document.body, { attributes: true, attributeFilter: ["class"] });
-  window.addEventListener("pagehide", () => { if (connected) send("ccrd-reader-stop"); });
-  return { read, previewLoaded, previewClosed, modal, owns };
+  }
+  controls();
+  return { launch, previewLoaded, previewClosed, owns: node => !!node && panel.contains(node), modal: () => false };
 })();

tests/test_browser.py

@@ -808,11 +808,10 @@ class BrowserInteractionTests(unittest.TestCase):
             count = page.evaluate("previewFocusableElements().length")
             # Reader entry points are intentionally keyboard-accessible after
             # the original header controls. Walk the complete visible cycle.
-            for _ in range(count - 1):
+            for _ in range(count):
                 previous = page.evaluate("previewFocusableElements().indexOf(document.activeElement)")
                 page.keyboard.press("Tab")
                 self.assertTrue(page.evaluate("index => document.activeElement === previewFocusableElements()[(index + 1) % previewFocusableElements().length]", previous))
-            self.assertTrue(page.evaluate("document.activeElement === previewFocusableElements()[0]"))
 
             button.click()
             self.assertEqual(button.get_attribute("aria-pressed"), "false")

tests/test_search.py

@@ -979,7 +979,8 @@ class FrontendContractTests(unittest.TestCase):
             "folder-toggle-all",
             "source-filter-cancel", "folder-filter-cancel",
             "filter-min-size", "filter-min-unit", "filter-max-size", "filter-max-unit", "random-book-btn",
-            "speech-launch", "speech-collapse", "speech-stop", "speech-retry",
+            "speech-collapse", "speech-stop", "speech-play", "speech-previous", "speech-next",
+            "speech-pitch", "speech-speed", "speech-timer", "speech-visible", "speech-locate",
         }
         self.assertEqual(parser.ids, expected)
         selector_exceptions = {"header-logo", "search-input"}
@@ -1004,7 +1005,9 @@ class FrontendContractTests(unittest.TestCase):
             "filter-min-size": "DOM.filterMinSize", "filter-min-unit": "DOM.filterMinUnit",
             "filter-max-size": "DOM.filterMaxSize", "filter-max-unit": "DOM.filterMaxUnit",
             "random-book-btn": "DOM.randomBookBtn",
-            "speech-launch": "launch", "speech-collapse": "collapse", "speech-stop": "stopButton", "speech-retry": "retry",
+            "speech-collapse": "collapse", "speech-stop": "stopButton", "speech-play": "play",
+            "speech-previous": "previous", "speech-next": "next", "speech-pitch": "pitch",
+            "speech-speed": "speed", "speech-timer": "timer", "speech-visible": "visible", "speech-locate": "locate",
         }
         for control_id, object_name in event_objects.items():
             self.assertIn(f'{object_name}.addEventListener(', source, control_id)

tests/test_tts_browser.py

@@ -1,14 +1,9 @@
-"""Explicit offline CCRD/Hitokoto cross-origin bridge and reader acceptance.
-
-Requires Playwright, HITOKOTO_SOURCE_DIR and an existing CCRD_TTS_SAMPLE MP3.
-Requests are routed fixtures; no production, corpus scan or model loading.
-"""
+"""Explicit offline native-player browser tier; no corpus/model/production calls."""
 from __future__ import annotations
 
 import json
 import os
 from pathlib import Path
-import re
 import unittest
 from urllib.parse import unquote, urlparse
 
@@ -22,250 +17,236 @@ SEARCH = "https://vomebook-search.hf.space"
 SPEECH = "https://vomebook-hitokoto.hf.space"
 
 
-@unittest.skipUnless(sync_playwright and os.environ.get("HITOKOTO_SOURCE_DIR") and os.environ.get("CCRD_TTS_SAMPLE"),
-                     "explicit: set HITOKOTO_SOURCE_DIR and CCRD_TTS_SAMPLE, install Playwright/Chromium")
+@unittest.skipUnless(sync_playwright and os.environ.get("CCRD_TTS_SAMPLE"), "explicit: install Playwright and set CCRD_TTS_SAMPLE to an existing MP3")
 class SpeechReaderBrowserTests(unittest.TestCase):
-    def test_preview_selection_player_isolation_and_cross_origin_contract(self):
-        speech_root = Path(os.environ["HITOKOTO_SOURCE_DIR"])
+    def test_native_player_long_source_navigation_latency_pause_and_independence(self):
         mp3 = Path(os.environ["CCRD_TTS_SAMPLE"]).read_bytes()
-        source_text = "前言。𠮷这是一篇长文，校长文章写得很好，我得亲自处理。\n版本1.2.3与日期2026-10-18。" * 4
+        text = "".join(f"第{index:04d}段，这是一篇长文，校长文章写得很好，我得亲自处理。𠮷※😀仍继续读。\n" for index in range(1000))
         sources = [{"slug": "CCRD", "name": "CCRD", "count": 2}]
-        items = [{"doc_id": f"CCRD:{index}", "File": f"朗读测试{index}", "Source": "CCRD", "SourceName": "CCRD",
-                  "Folder": ["测试"], "Size": 1234, "snippet": "长文与手机测试", "snippet_complete": True} for index in range(2)]
+        items = [{"doc_id": f"CCRD:{index}", "File": f"朗读测试{index}", "Source": "CCRD", "SourceName": "CCRD", "Folder": ["测试"],
+                  "Size": 1234, "snippet": "长文与手机测试", "snippet_complete": True} for index in range(2)]
         with sync_playwright() as playwright:
             browser = playwright.chromium.launch(headless=True, args=["--no-sandbox"])
             try:
                 for mobile in (False, True):
                     with self.subTest(mobile=mobile):
-                        context = browser.new_context(viewport={"width": 390, "height": 844} if mobile else {"width": 1440, "height": 900},
-                                                      reduced_motion="reduce")
-                        context.add_init_script("delete Navigator.prototype.serviceWorker")
-                        context.add_init_script("document.addEventListener('DOMContentLoaded',()=>{const audio=document.querySelector('#audio');if(audio)audio.muted=true;})")
-                        context.add_init_script("window.__bridge=[];addEventListener('message',event=>{if(event.data?.type?.startsWith('ccrd-reader-'))__bridge.push({origin:event.origin,data:event.data});})")
-                        jobs, tts_posts, connections, deleted = {}, [], [], []
-                        blocked = [False]
-                        missing_client, old_html = [False], [False]
-                        errors = []
+                        context = browser.new_context(viewport={"width": 390, "height": 844} if mobile else {"width": 1440, "height": 900}, reduced_motion="reduce")
+                        context.add_init_script("delete Navigator.prototype.serviceWorker;new MutationObserver(()=>{const a=document.querySelector('#speech-audio');if(a)a.muted=true;}).observe(document,{childList:true,subtree:true});")
+                        posts, deleted, paths, jobs, errors, held = [], [], [], {}, [], []
+                        hold_next, offline, missing, bad = [False], [False], [False], [False]
+                        headers = {"Access-Control-Allow-Origin": SEARCH, "Access-Control-Allow-Headers": "Content-Type,Range", "Access-Control-Allow-Methods": "GET,POST,DELETE,OPTIONS"}
 
-                        def reply(route, data, status=200, headers=None):
-                            route.fulfill(status=status, content_type="application/json", body=json.dumps(data), headers=headers or {})
+                        def reply(route, data, code=200):
+                            route.fulfill(status=code, content_type="application/json", body=json.dumps(data), headers=headers)
 
                         def handler(route):
                             request = route.request
-                            parsed = urlparse(request.url)
-                            path = unquote(parsed.path)
+                            path = unquote(urlparse(request.url).path)
                             if request.url.startswith(SEARCH):
-                                if path == "/":
-                                    html = (ROOT / "static/index.html").read_text()
-                                    if old_html[0]:
-                                        html = re.sub(r'<button[^>]+id="speech-launch"[^>]*>.*?</button>', '', html)
-                                        html = re.sub(r'<dialog id="speech-dialog".*?</dialog>', '', html, flags=re.S)
-                                        html = html.replace('<script src="/static/tts-client.js"></script>', '')
-                                    route.fulfill(content_type="text/html", body=html)
+                                if path == "/": route.fulfill(path=ROOT / "static/index.html")
                                 elif path.startswith("/static/"):
-                                    if path == "/static/tts-client.js" and missing_client[0]:
-                                        route.abort("connectionfailed"); return
-                                    file = ROOT / path.lstrip("/")
-                                    if file.is_file():
-                                        route.fulfill(path=file)
-                                    else:
-                                        reply(route, {}, 404)
-                                elif path == "/api/ping":
-                                    route.fulfill(status=204)
-                                elif path == "/api/sources":
-                                    reply(route, sources)
-                                elif path.startswith("/data/sidebar/"):
-                                    reply(route, {"sources": sources})
-                                elif path.startswith("/data/initial/") or path.startswith("/api/search"):
-                                    reply(route, {"results": items, "total": 2, "page": 1, "page_size": 100, "q": "",
-                                                  "sort": "relevance", "exact": True, "fulltext": True, "search_paths": True, "source": None})
+                                    if missing[0] and path == "/static/tts-client.js": route.abort("connectionfailed")
+                                    else: route.fulfill(path=ROOT / path.lstrip("/"))
+                                elif path == "/api/ping": route.fulfill(status=204)
+                                elif path == "/api/sources": reply(route, sources)
+                                elif path.startswith("/data/sidebar/"): reply(route, {"sources": sources})
                                 elif path.startswith("/api/preview/"):
                                     id = path.rsplit("/", 1)[-1]
-                                    reply(route, {"doc_id": id, "title": "朗读测试 <b>原文</b>", "source": "CCRD", "path": "测试/原文.txt",
-                                                  "text": source_text if id == "CCRD:0" else "长"*20001 if id == "CCRD:long" else "另一个预览，不应该打断原朗读。"})
-                                elif path == "/manifest.json":
-                                    reply(route, {"name": "Test"})
-                                else:
-                                    reply(route, {}, 404)
+                                    reply(route, {"title": "原文 <b>不作 HTML</b>", "source": "CCRD", "path": "测试.txt", "text": text if id == "CCRD:0" else "另一个预览，不应该打断原朗读。"})
+                                elif path.startswith("/api/search") or path.startswith("/data/initial/"):
+                                    reply(route, {"results": items, "total": 2, "page": 1, "page_size": 100, "q": "", "exact": True, "fulltext": True, "search_paths": True, "sort": "relevance", "source": None})
+                                else: reply(route, {}, 404)
                             elif request.url.startswith(SPEECH):
-                                connections.append(request.url)
-                                if blocked[0] and path == "/tts/":
-                                    route.abort("connectionfailed"); return
-                                if path == "/tts/":
-                                    route.fulfill(content_type="text/html", body=(speech_root / "static/tts.html").read_bytes(),
-                                                  headers={"Content-Security-Policy": "frame-ancestors " + SEARCH})
-                                elif path in {"/tts/app.js", "/tts/reader.js", "/tts/embed.js", "/tts/style.css"}:
-                                    name = {"app.js": "tts.js", "style.css": "tts.css"}.get(path.rsplit("/", 1)[-1], path.rsplit("/", 1)[-1])
-                                    route.fulfill(path=speech_root / "static" / name)
-                                elif path == "/tts/health":
-                                    reply(route, {"ready": True, "engine": {"threads": 2}, "queued": 0})
-                                elif path == "/tts/voices":
-                                    reply(route, {"voices": [{"id": id, "name": id} for id in ("zf_001", "zf_017", "zm_010", "zm_029")]})
-                                elif path == "/tts/jobs" and request.method == "POST":
+                                paths.append(path)
+                                if offline[0]: route.abort("connectionfailed"); return
+                                if request.method == "OPTIONS": route.fulfill(status=200, headers=headers); return
+                                if path == "/tts/jobs" and request.method == "POST":
                                     body = request.post_data_json
-                                    tts_posts.append(body)
-                                    id = f"{len(jobs)+1:032d}"
+                                    posts.append(body)
+                                    id = f"{len(posts):032d}"
                                     length = len(body["text"].encode("utf-16-le")) // 2
-                                    jobs[id] = {"id": id, "state": "ready", "cache_hit": False, "result": {
-                                        "audio_url": f"/tts/audio/{id}.mp3", "audio_seconds": 10.6, "synthesis_seconds": .2,
-                                        "pitch_semitones": body["pitch_semitones"]}, "source_segments": [{"start": 0, "end": length}],
-                                        "progress": {"complete": True, "total_parts": 1, "parts": [{"index": 0, "start": 0, "end": length,
-                                        "audio_url": f"/tts/audio/{id}/parts/0.mp3", "first_audio_seconds": .2,
-                                        "audio_seconds": 10.6, "pitch_semitones": body["pitch_semitones"]}]}}
+                                    middle = len(body["text"][:20].encode("utf-16-le")) // 2
+                                    spans = [(0, middle), (middle, length)] if middle < length else [(0, length)]
+                                    parts = [{"index": index, "start": begin, "end": end, "audio_url": f"/tts/audio/{id}/parts/{index}.mp3", "pitch_semitones": body["pitch_semitones"]} for index, (begin, end) in enumerate(spans)]
+                                    if bad[0]: parts[0]["audio_url"] = "https://untrusted.test/leak"
+                                    jobs[id] = {"id": id, "state": "ready", "source_segments": [{"start": begin, "end": end} for begin, end in spans],
+                                                "progress": {"total_parts": len(parts), "parts": parts}, "result": {"pitch_semitones": body["pitch_semitones"]}}
+                                    if hold_next[0]: held.append((route, id)); return
                                     reply(route, jobs[id], 202)
                                 elif path.startswith("/tts/jobs/"):
                                     id = path.rsplit("/", 1)[-1]
                                     if request.method == "DELETE": deleted.append(id)
-                                    reply(route, jobs.get(id, {"state": "error"}))
-                                elif path.startswith("/tts/audio/"):
-                                    route.fulfill(content_type="audio/mpeg", body=mp3)
-                                else:
-                                    reply(route, {}, 404)
-                            else:
-                                route.fulfill(status=204)
+                                    reply(route, jobs[id])
+                                elif path.startswith("/tts/audio/"): route.fulfill(content_type="audio/mpeg", body=mp3, headers=headers)
+                                else: reply(route, {}, 404)
+                            else: route.fulfill(status=204)
 
                         context.route("**/*", handler)
                         page = context.new_page()
+                        page.set_default_timeout(20000)
                         page.on("pageerror", lambda error: errors.append(str(error)))
-                        page.set_default_timeout(30000)
                         try:
-                            page.goto(SEARCH + "/", wait_until="domcontentloaded")
+                            page.goto(SEARCH, wait_until="domcontentloaded")
                             page.locator(".result-item").first.wait_for()
-                            self.assertFalse(connections, "Opening search must not load the speech service")
-                            self.assertFalse(tts_posts)
+                            self.assertEqual(page.locator("#status-bar [id^=speech]").count(), 0)
                             page.locator("[data-action=preview]").first.click()
-                            page.locator(".preview-body").wait_for()
-                            self.assertEqual(page.locator(".preview-body").text_content(), source_text)
-                            # No selection is an explicit error, not a fallback to full text.
-                            page.locator("[data-speech=selection]").click()
-                            self.assertFalse(connections)
-                            selected_text = "这是一篇长文，校长文章写得很好，我得亲自处理。"
-                            page.evaluate("""text=>{
-                              const body=document.querySelector('.preview-body');const start=body.textContent.indexOf(text);
-                              const walker=document.createTreeWalker(body,NodeFilter.SHOW_TEXT);let node;let offset=0;
-                              const range=document.createRange();let begun=false;
-                              while(node=walker.nextNode()){
-                                if(!begun&&start<offset+node.length){range.setStart(node,start-offset);begun=true;}
-                                if(begun&&start+text.length<=offset+node.length){range.setEnd(node,start+text.length-offset);break;}offset+=node.length;
-                              }
-                              getSelection().removeAllRanges();getSelection().addRange(range);
-                            }""", selected_text)
-                            page.locator("[data-speech=selection]").click()
-                            page.wait_for_function("document.querySelector('#speech-status').textContent.includes('已载入')")
-                            frame = page.frame_locator("#speech-frame")
-                            self.assertEqual(frame.locator("#speech-text").input_value(), selected_text)
-                            self.assertFalse(tts_posts, "Import alone must not submit speech")
-                            self.assertFalse(frame.locator("#storage-controls").is_visible())
-                            self.assertFalse(frame.locator("#remember").is_checked())
-                            self.assertTrue(page.evaluate("CCRDSpeech.modal()") if mobile else not page.evaluate("CCRDSpeech.modal()"))
-                            self.assertTrue(page.evaluate("document.documentElement.scrollWidth<=innerWidth+1"))
-                            self.assertEqual(frame.locator("main b").count(), 0)
+                            body = page.locator(".preview-body"); body.wait_for()
+                            self.assertFalse(posts)
+                            self.assertEqual(page.locator(".preview-speech-tools").count(), 0)
+                            self.assertEqual(page.locator("iframe").count(), 0)
+                            button = page.locator("[data-speech-toggle]")
                             if mobile:
-                                frame.locator("#playback-rate").focus()
-                                page.keyboard.press("Tab")
-                                page.wait_for_function("document.activeElement.id==='speech-collapse'")
-                            # Same-origin spoof from the wrong Window/channel is ignored.
-                            page.evaluate("""()=>window.postMessage({type:'ccrd-reader-loaded',channel:'0'.repeat(48),characters:99999},location.origin)""")
-                            self.assertNotIn("99999", page.locator("#speech-status").text_content())
-                            bridge_channel = page.evaluate("__bridge.find(event=>event.data.type==='ccrd-reader-ready').data.channel")
-                            # The source origin alone is insufficient: a sibling
-                            # Window with that origin and nonce is not the parent.
-                            page.evaluate("""({channel,target})=>{
-                              const sibling=document.createElement('iframe');sibling.hidden=true;document.body.append(sibling);
-                              const data={type:'ccrd-reader-import',channel,text:'不应该载入',title:'伪造',context_before:'',context_after:''};
-                              sibling.contentWindow.eval(`parent.document.querySelector('#speech-frame').contentWindow.postMessage(${JSON.stringify(data)},${JSON.stringify(target)})`);
-                              setTimeout(()=>sibling.remove(),100);
-                            }""", {"channel": bridge_channel, "target": SPEECH})
-                            page.wait_for_timeout(200)
-                            self.assertEqual(frame.locator("#speech-text").input_value(), selected_text)
-                            frame.locator("#pitch").evaluate("n=>{n.value=-2;n.dispatchEvent(new Event('input',{bubbles:true}));}")
-                            frame.locator("#playback-rate").evaluate("n=>{n.value=.5;n.dispatchEvent(new Event('input',{bubbles:true}));}")
-                            frame.locator("#generate").click()
-                            page.wait_for_function("document.querySelector('#speech-frame')!==null")
-                            speech_page = next(f for f in page.frames if f.url.startswith(SPEECH))
-                            speech_page.wait_for_function("session && document.querySelector('#audio').currentTime>.1")
-                            self.assertEqual(tts_posts[0]["text"], selected_text)
-                            self.assertEqual(tts_posts[0]["pitch_semitones"], -2)
-                            self.assertTrue(tts_posts[0]["context_before"].endswith("前言。𠮷"))
-                            self.assertNotIn("原文.txt", json.dumps(tts_posts))
-                            # Hiding/reopening keeps the exact iframe and audio session alive.
-                            original_src = page.locator("#speech-frame").get_attribute("src")
+                                self.assertGreaterEqual(button.bounding_box()["y"], page.locator(".preview-theme-btn").bounding_box()["y"] + 25)
+                            else:
+                                self.assertLess(button.bounding_box()["x"], page.locator("[data-preview-fullscreen]").bounding_box()["x"])
+                            # A single user play gesture starts a bounded first
+                            # POST directly, not health/voices/iframe requests.
+                            button.click()
+                            page.wait_for_function("document.querySelector('#speech-audio')?.currentTime>.1", polling=100)
+                            self.assertTrue(posts)
+                            self.assertLessEqual(len(posts[0]["text"]), 80)
+                            self.assertEqual(posts[0]["voice"], "zf_001")
+                            self.assertEqual(posts[0]["unsupported_policy"], "pause")
+                            self.assertEqual(posts[0]["speed"], 1)
+                            self.assertFalse(any(path in {"/tts/", "/tts/health", "/tts/voices"} for path in paths))
+                            self.assertEqual(body.text_content(), text)
+                            self.assertLessEqual(len(posts), 2)
+                            self.assertTrue(page.locator("#speech-panel").is_visible())
+                            self.assertTrue(page.evaluate("document.documentElement.scrollWidth<=innerWidth+1"))
+                            # Current + following only; concatenation is exact,
+                            # and source past 20k is not pre-submitted/scanned.
+                            page.wait_for_function("document.querySelector('#speech-audio').currentTime>.3", polling=100)
+                            page.wait_for_timeout(800)
+                            self.assertLessEqual(len(posts), 2)
+                            self.assertEqual("".join(row["text"] for row in posts), text[:sum(len(row["text"]) for row in posts)])
+                            count = len(posts)
+                            page.locator("#speech-speed").evaluate("n=>{n.value=1.5;n.dispatchEvent(new Event('input',{bubbles:true}));}")
+                            self.assertEqual(page.locator("#speech-audio").evaluate("n=>n.playbackRate"), 1.5)
+                            self.assertEqual(len(posts), count)
+                            page.locator("#speech-play").click()
+                            page.wait_for_timeout(750)
+                            self.assertEqual(page.locator("#speech-audio").evaluate("n=>n.paused"), True)
+                            self.assertEqual(len(posts), count)
+                            page.locator("#speech-pitch").evaluate("n=>{n.value=1;n.dispatchEvent(new Event('change',{bubbles:true}));}")
+                            page.wait_for_timeout(350)
+                            self.assertEqual(len(posts), count, "Paused setting changes must not start synthesis")
+                            page.locator("#speech-play").click()
                             page.locator("#speech-collapse").click()
-                            self.assertFalse(page.locator("#speech-dialog").is_visible())
-                            speech_page.wait_for_function("document.querySelector('#audio').currentTime>.3", polling=100)
-                            self.assertFalse(deleted)
+                            page.wait_for_function("!document.querySelector('#speech-audio').paused", polling=100)
+                            self.assertFalse(page.locator("#speech-panel").is_visible())
+                            # Search/preview/theme remain independent from audio.
                             if mobile:
                                 page.locator("[data-action=close-preview]").click()
                                 page.wait_for_function("!STATE.previewDocId")
                             page.locator("#search-input").fill("手机")
-                            page.wait_for_function("STATE.query==='手机' && !STATE.isLoading")
-                            page.locator("#sort-select").select_option("name")
+                            page.wait_for_function("STATE.query==='手机'&&!STATE.isLoading")
                             page.locator("[data-action=preview]").last.click()
-                            page.wait_for_function("STATE.previewDocId==='CCRD:1'")
-                            self.assertTrue(speech_page.evaluate("session!==null"))
-                            self.assertFalse(deleted)
-                            page.locator("[data-speech=controls]").click()
-                            self.assertEqual(page.locator("#speech-frame").get_attribute("src"), original_src)
-                            self.assertEqual(frame.locator("#speech-text").input_value(), selected_text)
+                            page.wait_for_function("document.querySelector('.preview-body')?.textContent.startsWith('另一个')")
+                            self.assertFalse(page.locator("#speech-audio").evaluate("n=>n.paused"))
+                            page.evaluate("document.querySelector('#speech-panel').hidden=false")
+                            page.locator("#speech-locate").click()
+                            page.wait_for_function("STATE.previewDocId==='CCRD:0'")
+                            self.assertEqual(page.locator(".preview-body").text_content(), text)
+                            page.locator("[data-speech-toggle]").click()
+                            # Exact viewport-top restart, well past 20k characters.
+                            body.evaluate("n=>{const r=document.createRange();r.setStart(n.firstChild,25000);r.setEnd(n.firstChild,25001);n.scrollTop+=r.getBoundingClientRect().top-n.getBoundingClientRect().top-5;}")
+                            before = len(posts)
+                            page.locator("#speech-visible").click()
+                            page.wait_for_timeout(500)
+                            self.assertGreater(len(posts), before)
+                            chunk = posts[before]["text"]
+                            source_index = len(text[:text.index(chunk)].encode("utf-16-le")) // 2
+                            self.assertGreater(source_index, 24000)
+                            self.assertLess(source_index, 25200)
+                            self.assertLessEqual(len(chunk), 80)
+                            # Double-click selects and starts the source sentence,
+                            # not search highlights/HTML or a guessed time ratio.
                             page.locator("#speech-collapse").click()
-                            page.locator("[data-speech=preview]").click()
-                            frame.locator("#embed-keep").wait_for(state="visible")
-                            self.assertEqual(frame.locator("#speech-text").input_value(), selected_text)
-                            self.assertEqual(len(tts_posts), 1)
-                            frame.locator("#embed-keep").click()
-                            self.assertTrue(speech_page.evaluate("session!==null"))
-                            page.locator("#speech-collapse").click()
-                            page.locator("[data-speech=preview]").click()
-                            frame.locator("#embed-replace").click()
-                            self.assertEqual(frame.locator("#speech-text").input_value(), "另一个预览，不应该打断原朗读。")
-                            self.assertEqual(len(tts_posts), 1, "Replacement requires a separate explicit synthesis click")
-                            frame.locator("#generate").click()
-                            speech_page.wait_for_function("session && document.querySelector('#audio').currentTime>.1")
-                            self.assertEqual(tts_posts[-1]["text"], "另一个预览，不应该打断原朗读。")
-                            frame.locator("#speech-text").press("Escape")
-                            page.wait_for_function("!document.querySelector('#speech-dialog').open")
-                            page.locator("[data-speech=controls]").click()
+                            body.evaluate("n=>n.scrollTop=0")
+                            box = body.evaluate("n=>{const r=document.createRange();r.setStart(n.firstChild,12);r.setEnd(n.firstChild,13);const b=r.getBoundingClientRect();return {x:b.x+b.width/2,y:b.y+b.height/2};}")
+                            before = len(posts)
+                            page.mouse.dblclick(box["x"], box["y"])
+                            page.wait_for_timeout(400)
+                            self.assertGreater(len(posts), before)
+                            self.assertTrue(posts[before]["text"].startswith("第0000段"))
+                            page.wait_for_function("!document.querySelector('#speech-audio').paused", polling=100)
+                            before = len(posts)
+                            page.locator("#speech-next").click()
+                            page.wait_for_timeout(300)
+                            self.assertTrue(posts[before]["text"].startswith("𠮷※😀"), posts[before]["text"])
+                            before = len(posts)
+                            page.locator("#speech-previous").click()
+                            page.wait_for_timeout(300)
+                            self.assertTrue(posts[before]["text"].startswith("第0000段"), posts[before]["text"])
+                            # Pitch changes regenerate only from the current
+                            # source clip, while speed remains instantaneous.
+                            before = len(posts)
+                            page.locator("#speech-pitch").evaluate("n=>{n.value=-2;n.dispatchEvent(new Event('input',{bubbles:true}));n.dispatchEvent(new Event('change',{bubbles:true}));}")
+                            page.wait_for_timeout(300)
+                            self.assertGreater(len(posts), before)
+                            self.assertEqual(posts[before]["pitch_semitones"], -2)
+                            page.wait_for_function("!document.querySelector('#speech-audio').paused", polling=100)
+                            # A held accepted speculative POST must be deleted
+                            # when its late capability arrives after pausing.
+                            page.locator("#speech-stop").click()
+                            hold_next[0] = True
+                            page.locator("[data-speech-toggle]").click()
+                            page.wait_for_timeout(200)
+                            self.assertTrue(held)
+                            route, id = held.pop(0); reply(route, jobs[id], 202)
+                            page.wait_for_function("!document.querySelector('#speech-audio').paused", polling=100)
+                            page.wait_for_timeout(500)
+                            page.locator("#speech-play").click()
+                            hold_next[0] = False
+                            for route, id in held:
+                                reply(route, jobs[id], 202)
+                            late_ids = [id for _, id in held]; held.clear()
+                            page.wait_for_timeout(400)
+                            self.assertTrue(all(id in deleted for id in late_ids))
+                            count = len(posts)
+                            page.wait_for_timeout(600)
+                            self.assertEqual(len(posts), count)
+                            page.locator("#speech-play").click()
+                            page.locator("#speech-timer").select_option("clip")
+                            page.evaluate("document.querySelector('#speech-audio').dispatchEvent(new Event('ended'))")
+                            page.wait_for_timeout(200)
+                            self.assertFalse(page.locator("#speech-audio").get_attribute("src"))
+                            self.assertIn("睡眠", page.locator("#speech-status").text_content())
+                            page.locator("#speech-play").click()
+                            page.wait_for_function("!document.querySelector('#speech-audio').paused", polling=100)
+                            page.locator("#speech-timer").select_option("5")
+                            page.evaluate("const oldNow=Date.now;Date.now=()=>oldNow()+301000;document.dispatchEvent(new Event('visibilitychange'))")
+                            self.assertFalse(page.locator("#speech-audio").get_attribute("src"))
+                            page.locator("#speech-stop").click()
+                            # Transport/invalid metadata never skip source or
+                            # load arbitrary URLs, and never break search.
+                            bad[0] = True
+                            page.locator("[data-speech-toggle]").click()
+                            page.wait_for_timeout(300)
+                            self.assertFalse(page.locator("#speech-audio").get_attribute("src"))
+                            self.assertIn("重试", page.locator("#speech-status").text_content())
+                            page.locator("#speech-stop").click()
+                            bad[0] = False; offline[0] = True
+                            page.locator("[data-speech-toggle]").click()
+                            page.wait_for_timeout(300)
                             page.locator("#speech-stop").click()
-                            speech_page.wait_for_function("session===null", polling=100)
-                            self.assertTrue(deleted)
-                            count = len(tts_posts)
-                            page.evaluate("openPreview('CCRD:long','')")
-                            page.wait_for_function("document.querySelector('.preview-body').textContent.length===20001")
-                            page.locator("[data-speech=preview]").click()
-                            self.assertEqual(len(tts_posts), count)
-                            self.assertIn("两万字", page.locator("#speech-status").text_content())
-                            # Offline player failure leaves real search/preview
-                            # code working; no auto retry loop or speech POST.
-                            blocked[0] = True
-                            page.goto(SEARCH + "/", wait_until="domcontentloaded")
-                            page.locator(".result-item").first.wait_for()
-                            page.wait_for_function("!STATE.isLoading")
-                            page.evaluate("const native=setTimeout;window.setTimeout=(fn,ms,...args)=>native(fn,ms===20000?100:ms,...args)")
-                            if not page.locator(".preview-body").count():
-                                page.locator("[data-action=preview]").first.click()
-                            page.locator("[data-speech=preview]").click()
-                            page.locator("#speech-retry").wait_for(state="visible")
-                            page.locator("#speech-collapse").click()
                             if mobile:
                                 page.locator("[data-action=close-preview]").click()
                                 page.wait_for_function("!STATE.previewDocId")
-                            page.locator("#search-input").fill("朗读故障后仍能搜索")
-                            page.wait_for_function("STATE.query==='朗读故障后仍能搜索' && !STATE.isLoading")
+                            page.locator("#search-input").fill("语音故障不影响搜索")
+                            page.wait_for_function("STATE.query==='语音故障不影响搜索'&&!STATE.isLoading")
+                            self.assertEqual(page.locator(".result-item").count(), 2)
+                            # Mixed-cached/missing optional reader JS must never
+                            # break the main search controller.
+                            missing[0] = True
+                            page.goto(SEARCH, wait_until="domcontentloaded")
+                            page.locator(".result-item").first.wait_for()
+                            page.locator("#search-input").fill("旧缓存仍可搜索")
+                            page.wait_for_function("STATE.query==='旧缓存仍可搜索'&&!STATE.isLoading")
                             self.assertEqual(page.locator(".result-item").count(), 2)
-                            self.assertEqual(len(tts_posts), count)
-                            # New HTML with a missing bridge, and an old cached
-                            # shell with new app.js, must both retain search.
-                            for mode in ('missing-client', 'old-html'):
-                                missing_client[0] = mode == 'missing-client'
-                                old_html[0] = mode == 'old-html'
-                                page.goto(SEARCH + "/", wait_until="domcontentloaded")
-                                page.locator(".result-item").first.wait_for()
-                                page.locator("#search-input").fill("缓存兼容")
-                                page.wait_for_function("STATE.query==='缓存兼容' && !STATE.isLoading")
-                                self.assertEqual(page.locator(".result-item").count(), 2)
-                                self.assertEqual(len(tts_posts), count)
                             self.assertFalse(errors, errors)
                         finally:
+                            for route, id in held: reply(route, jobs[id], 202)
                             context.close()
             finally:
                 browser.close()

tests/test_tts_plan.cjs

@@ -0,0 +1,28 @@
+"use strict";
+const assert = require("node:assert/strict");
+require("../static/tts-client.js");
+const plan = globalThis.CCRDSpeechPlan;
+for (const text of ["甲𠮷乙。".repeat(8000), "正文。" + " \n".repeat(2000) + "末尾。", "甲".repeat(77) + "2026年10月18日版本1.2.3与编号1234567890正文。".repeat(20), "LongEnglishWord".repeat(100) + "中文。", "😀★※。".repeat(1000)]) {
+  let offset = 0, count = 0;
+  const collected = [];
+  while (offset < text.length) {
+    const part = plan.batch(text, offset, count === 0);
+    assert.equal(part.start, offset);
+    assert(part.end > offset);
+    assert(Array.from(part.text).length <= 800);
+    assert(Array.from(part.context_before).length <= 32);
+    assert(Array.from(part.context_after).length <= 32);
+    assert.equal(part.text, text.slice(part.start, part.end));
+    assert(!/^[\uDC00-\uDFFF]/u.test(part.text));
+    collected.push(part.text); offset = part.end; count++;
+  }
+  assert.equal(collected.join(""), text);
+}
+const text = "甲".repeat(77) + "2026年10月18日版本1.2.3用于测试。";
+assert.equal(plan.batch(text, 0, true).text, "甲".repeat(77));
+assert.equal(plan.batch(text, 77, true).text, text.slice(77));
+const source = "第一句。第二句里有𠮷和版本1.2.3。第三句！";
+assert.deepEqual(plan.sentence(source, source.indexOf("𠮷")), { start: 4, end: source.indexOf("第三句") });
+assert.equal(plan.safe("甲𠮷乙", 2), 1);
+assert.equal(Array.from(plan.batch("文".repeat(50000), 23456, true).text).length, 80);
+console.log("Rolling source plan: lossless >20k, non-BMP, numeric atoms, bounded batches/context PASS");