From 88dfc124d2225cb4493d77ac6aafac571e1c6113 Mon Sep 17 00:00:00 2001
From: Roni bhakta <77425964+ronibhakta1@users.noreply.github.com>
Date: Mon, 3 Aug 2026 19:05:13 +0530
Subject: [PATCH] refactor: update speech engine integration and remove
 obsolete bitrate/sample rate options

---
 app/static/demo.html | 413 +++++++++++++++++++------------------------
 1 file changed, 186 insertions(+), 227 deletions(-)

diff --git a/app/static/demo.html b/app/static/demo.html
index c213474..1706930 100644
--- a/app/static/demo.html
+++ b/app/static/demo.html
@@ -210,11 +210,8 @@ <h1>Readium speech server <span class="em">demo</span></h1>
     <div class="grid">
       <div class="field"><label for="speed">Speed</label><input id="speed" type="number" step="0.1" value="1" /></div>
       <div class="field"><label for="pitch">Pitch</label><input id="pitch" type="number" step="0.1" placeholder="default" /></div>
-      <div class="field"><label for="bitrate">Bitrate</label>
-        <select id="bitrate"><option value="">default</option><option value="32">32 kbps</option><option value="64">64 kbps</option><option value="96">96 kbps</option><option value="128">128 kbps</option><option value="192">192 kbps</option></select>
-      </div>
-      <div class="field"><label for="sampleRate">Sample rate</label>
-        <select id="sampleRate"><option value="">default</option><option value="16000">16000 Hz</option><option value="24000">24000 Hz</option><option value="48000">48000 Hz</option></select>
+      <div class="field"><label for="strategy">Format strategy</label>
+        <select id="strategy"><option value="quality">quality</option><option value="bandwidth">bandwidth</option></select>
       </div>
     </div>
     <div class="checks">
@@ -237,15 +234,16 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 
 <script type="module">
 import {
-  WebSpeechReadAloudNavigator,
+  SpeechServerEngine,
+  ReadiumSpeechNavigator,
   setupDecorations,
   DecorationStyleType,
-} from "https://esm.sh/@readium/speech@0.4.0";
+} from "https://esm.sh/@readium/speech@0.5.0";
 
 const el = id => document.getElementById(id);
 const textEl=el('text'), voiceEl=el('voice'), formatEl=el('format'), languageEl=el('language'), vmetaEl=el('vmeta');
 const readingEl=el('reading');
-const speedEl=el('speed'), pitchEl=el('pitch'), bitrateEl=el('bitrate'), sampleRateEl=el('sampleRate');
+const speedEl=el('speed'), pitchEl=el('pitch'), strategyEl=el('strategy');
 const ssmlEl=el('ssml'), boundaryEl=el('boundary');
 const outputEl=el('output'), curlEl=el('curl'), bannerEl=el('banner');
 const speakBtn=el('speakBtn'), speakLabel=el('speakLabel'), downloadBtn=el('downloadBtn');
@@ -284,195 +282,68 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 };
 const FORMAT_NOTE = { wav:"lossless", opus:"compressed", mp3:"lossy" };
 const PROVIDER_NAMES = { pocket:"PocketTTS", elevenlabs:"ElevenLabs" };
-
-/* readium/speech playback engine, backed by this server's REST API 
-   Implements ReadiumSpeechPlaybackEngine (see @readium/speech's engine.d.ts). Handed to
-   WebSpeechReadAloudNavigator, which despite its name accepts any conforming engine —
-   it only falls back to the browser's Web Speech API when none is given. */
-class RemoteEngine {
-  constructor() {
-    this._listeners = new Map();
-    this._voices = null;
-    this._currentVoice = null;
-    this._utterances = [];
-    this._index = 0;
-    this._rate = 1;
-    this._pitch = null;
-    this._volume = 1;
-    this._format = 'wav';
-    this._bitrate = null;
-    this._sampleRate = null;
-    this._boundary = false;
-    this._marks = [];
-    this._markIdx = -1;
-    this._rafId = 0;
-    this._blobUrl = null;
-    this.audioEl = new Audio();
-    this.audioEl.addEventListener('ended', () => { cancelAnimationFrame(this._rafId); this._emit({ type: 'end' }); });
-    this.audioEl.addEventListener('error', () => this._emit({ type: 'error', detail: this.audioEl.error }));
-  }
-
-  on(type, cb) {
-    if (!this._listeners.has(type)) this._listeners.set(type, []);
-    this._listeners.get(type).push(cb);
-    return () => { const a = this._listeners.get(type); const i = a.indexOf(cb); if (i > -1) a.splice(i, 1); };
-  }
-  _emit(event) { for (const cb of this._listeners.get(event.type) || []) cb(event); }
-
-  async getAvailableVoices() {
-    if (!this._voices) {
-      const raw = await fetch('/voices').then(r => r.json());
-      // Tag with the fields @readium/speech expects (source/label/voiceURI); everything
-      // else on our Voice schema already mirrors ReadiumSpeechVoice field-for-field.
-      this._voices = raw.map(v => ({ ...v, source: 'json', label: v.name, voiceURI: v.identifier }));
-    }
-    return this._voices;
-  }
-  setVoice(voice) {
-    this._currentVoice = typeof voice === 'string'
-      ? (this._voices || []).find(v => v.voiceURI === voice) || null
-      : voice;
-  }
-  getCurrentVoice() { return this._currentVoice; }
-  setSpeakInContentLanguage() {}
-  getSpeakInContentLanguage() { return false; }
-
-  // Non-interface extras: this server's request shape has no equivalent in the
-  // generic navigator (format/bitrate/sample-rate aren't a WebSpeech concept).
-  setOutputFormat(f) { this._format = f; }
-  setBitrate(kbps) { this._bitrate = kbps; }
-  setSampleRate(hz) { this._sampleRate = hz; }
-  setBoundary(enabled) { this._boundary = enabled; }
-  getBoundary() { return this._boundary; }
-
-  loadUtterances(contents) { this._utterances = contents; this._index = 0; this._emit({ type: 'ready' }); }
-  getUtteranceCount() { return this._utterances.length; }
-  getCurrentUtteranceIndex() { return this._index; }
-  setCurrentUtteranceIndex(index, onComplete) {
-    const ok = index >= 0 && index < this._utterances.length;
-    if (ok) this._index = index;
-    onComplete?.(ok);
-  }
-
-  setRate(rate) { this._rate = rate; }
-  getRate() { return this._rate; }
-  setPitch(pitch) { this._pitch = pitch; }
-  getPitch() { return this._pitch; }
-  setVolume(v) { this._volume = v; this.audioEl.volume = v; }
-  getVolume() { return this._volume; }
-  getState() { return this.audioEl.paused ? 'ready' : 'playing'; }
-
-  async speak(index = this._index) {
-    this._index = index;
-    const utt = this._utterances[index];
-    if (!utt || !this._currentVoice) { this._emit({ type: 'error', detail: 'missing utterance or voice' }); return; }
-
-    const output = { format: this._format };
-    if (this._rate !== 1) output.speed = this._rate;
-    if (this._pitch != null) output.pitch = this._pitch;
-    if (this._bitrate) output.bitrate = this._bitrate;
-    if (this._sampleRate) output.sample_rate = this._sampleRate;
-    const body = {
-      text: utt.ssml ?? utt.plain ?? '',
-      ssml: !!utt.ssml,
-      language: utt.language,
-      voice: this._currentVoice.voiceURI,
-      boundary: this._boundary,
-      output,
-    };
-
-    const t0 = performance.now();
-    let resp;
-    try {
-      resp = await fetch('/synthesize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-    } catch (e) {
-      this._emit({ type: 'error', detail: String(e) });
-      return;
-    }
-    const serverMs = performance.now() - t0;
-
-    if (!resp.ok) {
-      let error; try { error = await resp.json(); } catch { error = await resp.text(); }
-      this._emit({ type: 'http', detail: { body, status: resp.status, ok: false, error, serverMs } });
-      this._emit({ type: 'error', detail: error });
-      return;
-    }
-
-    let blob, boundaries = [];
-    if (this._boundary) {
-      const json = await resp.json();
-      boundaries = json.boundaries || [];
-      blob = new Blob([Uint8Array.from(atob(json.audio), c => c.charCodeAt(0))], { type: `audio/${json.format}` });
-    } else {
-      blob = await resp.blob();
-    }
-    this._emit({ type: 'http', detail: { body, status: resp.status, ok: true, blob, serverMs, boundaries } });
-
-    if (this._blobUrl) URL.revokeObjectURL(this._blobUrl);
-    this._blobUrl = URL.createObjectURL(blob);
-    this._marks = boundaries;
-    this._markIdx = -1;
-    this.audioEl.src = this._blobUrl;
-    this.audioEl.volume = this._volume;
-    this.audioEl.play().catch(() => {});
-    this._emit({ type: 'start' });
-    cancelAnimationFrame(this._rafId);
-    this._tick();
-  }
-
-  _checkBoundary() {
-    if (!this._marks.length) return;
-    const t = this.audioEl.currentTime;
-    let idx = -1;
-    for (let i = 0; i < this._marks.length; i++) { if (this._marks[i].elapsedTime <= t) idx = i; else break; }
-    if (idx !== this._markIdx) {
-      this._markIdx = idx;
-      if (idx >= 0) {
-        const m = this._marks[idx];
-        this._emit({ type: 'boundary', detail: { name: m.name, charIndex: m.charIndex, charLength: m.charLength } });
-      }
-    }
-  }
-  syncBoundary() { this._checkBoundary(); }
-  _tick() {
-    this._checkBoundary();
-    if (!this.audioEl.paused && !this.audioEl.ended) this._rafId = requestAnimationFrame(() => this._tick());
-  }
-
-  pause() { this.audioEl.pause(); cancelAnimationFrame(this._rafId); this._emit({ type: 'pause' }); }
-  resume() { this.audioEl.play().catch(() => {}); this._emit({ type: 'resume' }); this._tick(); }
-  stop() {
-    this.audioEl.pause(); this.audioEl.currentTime = 0;
-    this._markIdx = -1; cancelAnimationFrame(this._rafId);
-    this._emit({ type: 'stop' });
-  }
-  async destroy() {
-    this.stop();
-    if (this._blobUrl) URL.revokeObjectURL(this._blobUrl);
-    this._listeners.clear();
+const ENDPOINTS = { voices: '/voices', synthesize: '/synthesize', service: '/service' };
+
+/* SpeechServerEngine talks straight to the fetch it's given — this wrapper intercepts its
+   /synthesize traffic so the panel below (curl/response/waveform/download/metrics) can show
+   the real bytes and timing, since the engine itself exposes no such hook. */
+let onSynthUpdate = () => {};
+function safeParseBody(body) { try { return JSON.parse(body); } catch { return null; } }
+async function instrumentedFetch(url, init) {
+  if (!(typeof url === 'string' && url.endsWith('/synthesize') && init?.method === 'POST')) return fetch(url, init);
+  const requestBody = safeParseBody(init.body);
+  const t0 = performance.now();
+  const resp = await fetch(url, init);
+  const serverMs = performance.now() - t0;
+  if (!resp.ok) {
+    let error; try { error = await resp.clone().json(); } catch { error = await resp.clone().text(); }
+    onSynthUpdate({ requestBody, status: resp.status, ok: false, error, serverMs });
+    return resp;
   }
+  resp.clone().json().then(json => {
+    const blob = new Blob([Uint8Array.from(atob(json.audio), c => c.charCodeAt(0))], { type: `audio/${json.format}` });
+    onSynthUpdate({ requestBody, status: resp.status, ok: true, blob, serverMs, boundaries: json.boundaries || [] });
+  }).catch(() => {});
+  return resp;
 }
 
-const engine = new RemoteEngine();
-const speechNavigator = new WebSpeechReadAloudNavigator(engine);
+/* engine/navigator, rebuilt whenever the format preference or strategy changes — both are
+   SpeechServerEngine constructor-only options, there's no per-call override. */
+let engine = null, speechNavigator = null;
 const decorations = setupDecorations();
-
 let voices = [];
+
+function currentFormatOptions() {
+  const opts = { strategy: strategyEl.value || 'quality' };
+  if (formatEl.value) opts.preferredFormat = formatEl.value;
+  return opts;
+}
+async function rebuildEngine() {
+  const prevVoiceId = voiceEl.value;
+  if (engine) await engine.destroy().catch(() => {});
+  engine = new SpeechServerEngine({ endpoints: ENDPOINTS, fetch: instrumentedFetch, format: currentFormatOptions() });
+  if (voices.length) engine.setAvailableVoices(voices);
+  speechNavigator = new ReadiumSpeechNavigator(engine);
+  // Content language drives our own language <select>, independent of the voice's own
+  // language — without this the engine never sends `language` at all (see 0.4.0's
+  // setSpeakInContentLanguage), silently breaking the cross-language voice picks the UI offers.
+  speechNavigator.setSpeakInContentLanguage(true);
+  bindNavigatorEvents(speechNavigator);
+  if (prevVoiceId) speechNavigator.setVoice(prevVoiceId);
+}
 let langDisplay; try { langDisplay = new Intl.DisplayNames(['en'],{type:'language'}); } catch { langDisplay = null; }
 const nameOfLang = c => (langDisplay ? langDisplay.of(c) : c) || c;
 const prefix = t => (t||'').split('-')[0].toLowerCase();
 const voiceLangs = v => new Set([prefix(v.language), ...(v.otherLanguages||[]).map(prefix)]);
 
-/* request building */
+/* request building — a prediction of what SpeechServerEngine will actually send (it always
+   requests boundary:true and an explicit speed/pitch; format/bitrate come from `format`
+   passed at construction, not per-call, so this can only reflect the currently built engine). */
 function requestBody() {
-  const output = { format: formatEl.value };
-  if (speedEl.value && !speedEl.disabled) output.speed = parseFloat(speedEl.value) || 1;
+  const output = { format: formatEl.value, speed: speedEl.value && !speedEl.disabled ? (parseFloat(speedEl.value) || 1) : 1 };
   if (pitchEl.value && !pitchEl.disabled) output.pitch = parseFloat(pitchEl.value);
-  if (bitrateEl.value) output.bitrate = parseInt(bitrateEl.value, 10);
-  if (sampleRateEl.value) output.sample_rate = parseInt(sampleRateEl.value, 10);
-  const body = { text: textEl.value, voice: voiceEl.value, language: languageEl.value, output };
+  const body = { text: textEl.value, voice: voiceEl.value, language: languageEl.value, boundary: true, output };
   if (ssmlEl.checked && !ssmlEl.disabled) body.ssml = true;
-  if (boundaryEl.checked && !boundaryEl.disabled) body.boundary = true;
   return body;
 }
 function updateCurl() {
@@ -480,7 +351,7 @@ <h1>Readium speech server <span class="em">demo</span></h1>
     `curl -s -X POST ${location.origin}/synthesize \\\n` +
     `  -H 'Content-Type: application/json' \\\n` +
     `  -d '${JSON.stringify(requestBody())}' \\\n` +
-    `  -o speech.${boundaryEl.checked ? 'json' : formatEl.value}`;
+    `  -o speech.json`;
 }
 
 /* voice / language */
@@ -496,7 +367,6 @@ <h1>Readium speech server <span class="em">demo</span></h1>
   setEnabled(pitchEl, !!c.pitch);
   setEnabled(ssmlEl, !!c.ssml, 'ssmlRow');
   setEnabled(boundaryEl, !!c.boundary, 'boundaryRow');
-  bitrateEl.disabled = formatEl.value === 'wav';
 
   vmetaEl.innerHTML = '';
   if (v) {
@@ -534,6 +404,7 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 }
 
 async function loadData() {
+  await rebuildEngine();
   let svc, voiceList;
   try {
     [svc, voiceList] = await Promise.all([
@@ -572,13 +443,90 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 const actx = (window.AudioContext || window.webkitAudioContext) ? new (window.AudioContext||window.webkitAudioContext)() : null;
 let peaks = null, dpr = Math.min(window.devicePixelRatio || 1, 2), clipDuration = 0;
 
-// engine.audioEl.duration is often Infinity/NaN for blob audio, which breaks progress. Prefer
-// the duration we got from decodeAudioData; fall back to a finite element duration if available.
+// The decoded-for-peaks duration is preferred; fall back to summing the engine's own
+// scheduled chunk buffers (see chunkRanges()) if that decode ever failed.
 function dur() {
   if (clipDuration > 0 && isFinite(clipDuration)) return clipDuration;
-  return isFinite(engine.audioEl.duration) ? engine.audioEl.duration : 0;
+  const ranges = chunkRanges();
+  return ranges.length ? ranges[ranges.length - 1].end : 0;
+}
+function progressNow() { const d = dur(); return d ? Math.min(1, currentPlaybackTime() / d) : 0; }
+
+/* ponytail: SpeechServerEngine (0.5.0) has no public playback-position or seek API — it
+   schedules AudioBufferSourceNodes on a private AudioContext and never exposes them. This
+   reaches into engine.audioContext/scheduledChunks/handleUtteranceEnded (private fields,
+   accessible at runtime since TS `private` is compile-time only) to read position and to
+   reschedule nodes at an offset via AudioBufferSourceNode.start(when, offset) — the only way
+   Web Audio supports seeking a started source. Pinned to @readium/speech@0.5.0's internal
+   shape; drop this the moment the engine ships a public seek()/getCurrentTime(). */
+function chunkRanges() {
+  const scheduled = engine && engine['scheduledChunks'];
+  if (!scheduled || !scheduled.length) return [];
+  let cursor = 0;
+  return scheduled.map(entry => {
+    const start = cursor;
+    cursor += entry.chunk.audioBuffer.duration;
+    return { entry, start, end: cursor };
+  });
+}
+function currentPlaybackTime() {
+  const ctx = engine && engine['audioContext'];
+  const ranges = chunkRanges();
+  if (!ctx || !ranges.length) return 0;
+  const now = ctx.currentTime;
+  for (const { entry, start } of ranges) {
+    if (now < entry.startTime) break;
+    const within = Math.max(0, (now - entry.startTime) * entry.rate);
+    return start + within;
+  }
+  return 0;
+}
+function seekTo(ratio) {
+  const d = dur();
+  const ranges = chunkRanges();
+  if (!d || !ranges.length) return;
+  const ctx = engine['audioContext'], gain = engine['masterGain'];
+  if (!ctx || !gain) return;
+
+  const targetT = Math.min(d, Math.max(0, ratio * d));
+  const rate = ranges[0].entry.rate;
+
+  for (const { entry } of ranges) {
+    entry.node.onended = null;
+    try { entry.node.stop(); } catch {}
+    entry.node.disconnect();
+  }
+
+  const newScheduled = [];
+  let t = ctx.currentTime + 0.02; // tiny lead so start() never lands in the past
+  let lastNode = null;
+  for (const { entry, start, end } of ranges) {
+    if (end <= targetT) continue; // fully before the seek point — skip entirely
+    const offset = Math.max(0, targetT - start);
+    const node = ctx.createBufferSource();
+    node.buffer = entry.chunk.audioBuffer;
+    node.playbackRate.value = rate;
+    node.connect(gain);
+    node.start(t, offset);
+    if (lastNode) lastNode.onended = null;
+    lastNode = node;
+    const marks = entry.chunk.boundaries ?? [];
+    const nextBoundaryIndex = marks.findIndex(m => m.elapsedTime >= offset);
+    newScheduled.push({
+      chunk: entry.chunk, startTime: t - offset / rate, node,
+      nextBoundaryIndex: nextBoundaryIndex === -1 ? marks.length : nextBoundaryIndex, rate
+    });
+    t += (entry.chunk.audioBuffer.duration - offset) / rate;
+  }
+  if (lastNode) {
+    const generation = engine['speakGeneration'];
+    lastNode.onended = () => engine['handleUtteranceEnded'](generation);
+  }
+  engine['scheduledChunks'] = newScheduled;
+
+  drawWave(ratio);
+  timeEl.textContent = fmtTime(targetT);
 }
-function progressNow() { const d = dur(); return d ? Math.min(1, engine.audioEl.currentTime / d) : 0; }
 
 function sizeCanvas() {
   const r = waveEl.getBoundingClientRect();
@@ -602,7 +550,7 @@ <h1>Readium speech server <span class="em">demo</span></h1>
     for (let i = 0; i < N; i++) out[i] = out[i]/max;
     return out;
   } catch {
-    clipDuration = 0;  // decode failed — fall back to engine.audioEl.duration in dur()
+    clipDuration = 0;  // decode failed — fall back to chunkRanges() duration in dur()
     const out = new Float32Array(N);
     for (let i = 0; i < N; i++) out[i] = 0.25 + 0.6*Math.abs(Math.sin(i*0.35))*Math.abs(Math.cos(i*0.11));
     return out;
@@ -651,8 +599,8 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 let waveRafId = 0;
 function waveTick() {
   drawWave(progressNow());
-  timeEl.textContent = fmtTime(engine.audioEl.currentTime || 0);
-  if (!engine.audioEl.paused && !engine.audioEl.ended) waveRafId = requestAnimationFrame(waveTick);
+  timeEl.textContent = fmtTime(currentPlaybackTime());
+  if (speechNavigator.getState() === 'playing') waveRafId = requestAnimationFrame(waveTick);
 }
 
 /* synth flow */
@@ -662,7 +610,7 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 
 /* boundary word highlighting, via @readium/speech's decorations */
 let readingText = '';
-speechNavigator.on('boundary', (event) => {
+function onBoundary(event) {
   if (!event.detail || event.detail.name !== 'word') return;
   const { charIndex, charLength } = event.detail;
   const word = readingText.slice(charIndex, charIndex + charLength);
@@ -674,24 +622,23 @@ <h1>Readium speech server <span class="em">demo</span></h1>
     before: readingText.slice(0, charIndex),
     after: readingText.slice(charIndex + charLength),
   }], 'tts');
-});
+}
 function clearReadingHighlight() {
   decorations.applyDecorations([], 'tts');
   readingEl.classList.remove('show');
 }
-speechNavigator.on('start', () => {
-  if (!engine.getBoundary()) return;
+function onStart() {
+  if (!(boundaryEl.checked && !boundaryEl.disabled)) return;
   readingText = textEl.value;
   readingEl.textContent = readingText;
   readingEl.classList.add('show');
-});
-speechNavigator.on('stop', clearReadingHighlight);
-speechNavigator.on('end', clearReadingHighlight);
-speechNavigator.on('error', (event) => {
+}
+function onNavError(event) {
   const d = event.detail;
-  const msg = (d && d.detail) ? d.detail : (typeof d === 'string' ? d : (d?.message || JSON.stringify(d)));
+  const msg = (d && d.message) ? d.message : (typeof d === 'string' ? d : JSON.stringify(d));
   showError(msg);
-});
+  speakBtn.disabled = false; speakLabel.textContent = 'Speak';
+}
 // Click the highlighted text to go back to editing it (reading div sits over #text via CSS :has()).
 function backToEditing() { speechNavigator.stop(); textEl.focus(); }
 readingEl.addEventListener('click', backToEditing);
@@ -699,6 +646,25 @@ <h1>Readium speech server <span class="em">demo</span></h1>
   if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); backToEditing(); }
 });
 
+/* transport (waveform play/pause state) */
+function onTransportStart() { playBtn.classList.add('playing'); onair?.classList.add('live'); cancelAnimationFrame(waveRafId); waveTick(); }
+function onTransportPause() { playBtn.classList.remove('playing'); onair?.classList.remove('live'); cancelAnimationFrame(waveRafId); drawWave(progressNow()); }
+function onTransportStop() { playBtn.classList.remove('playing'); onair?.classList.remove('live'); cancelAnimationFrame(waveRafId); drawWave(0); }
+function onTransportEnd() { playBtn.classList.remove('playing'); onair?.classList.remove('live'); cancelAnimationFrame(waveRafId); drawWave(1); }
+
+function bindNavigatorEvents(nav) {
+  nav.on('boundary', onBoundary);
+  nav.on('start', onStart);
+  nav.on('stop', clearReadingHighlight);
+  nav.on('end', clearReadingHighlight);
+  nav.on('error', onNavError);
+  nav.on('start', onTransportStart);
+  nav.on('resume', onTransportStart);
+  nav.on('pause', onTransportPause);
+  nav.on('stop', onTransportStop);
+  nav.on('end', onTransportEnd);
+}
+
 function speak() {
   if (!textEl.value.trim()) { showError('Write some text first.'); textEl.focus(); return; }
   if (!voiceEl.value) { showError('No voice selected.'); return; }
@@ -707,22 +673,22 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 
   speechNavigator.setVoice(voiceEl.value);
   speechNavigator.setRate(speedEl.value && !speedEl.disabled ? (parseFloat(speedEl.value) || 1) : 1);
-  speechNavigator.setPitch(pitchEl.value && !pitchEl.disabled ? parseFloat(pitchEl.value) : null);
-  engine.setOutputFormat(formatEl.value);
-  engine.setBitrate(bitrateEl.value ? parseInt(bitrateEl.value, 10) : null);
-  engine.setSampleRate(sampleRateEl.value ? parseInt(sampleRateEl.value, 10) : null);
-  engine.setBoundary(boundaryEl.checked && !boundaryEl.disabled);
+  if (pitchEl.value && !pitchEl.disabled) speechNavigator.setPitch(parseFloat(pitchEl.value));
 
   const ssmlOn = ssmlEl.checked && !ssmlEl.disabled;
   const utterance = { language: languageEl.value };
   if (ssmlOn) utterance.ssml = textEl.value; else utterance.plain = textEl.value;
+
+  // loadContent() only starts buffering — play() is a no-op until the engine reports
+  // "ready" (SpeechServerEngine buffers ahead before that fires, unlike the old engine
+  // which was ready synchronously), so wait for it instead of calling play() right after.
+  const off = speechNavigator.on('ready', () => { off(); speechNavigator.play(); });
   speechNavigator.loadContent(utterance);
-  speechNavigator.play();
 }
 
 let currentBlob = null, currentFormat = null;
-engine.on('http', (event) => {
-  const { body, status, ok, blob, serverMs, boundaries, error } = event.detail;
+onSynthUpdate = (detail) => {
+  const { requestBody, status, ok, blob, serverMs, boundaries, error } = detail;
   speakBtn.disabled = false; speakLabel.textContent = 'Speak';
 
   if (!ok) {
@@ -732,12 +698,10 @@ <h1>Readium speech server <span class="em">demo</span></h1>
     return;
   }
   setResponse(`${status} OK\n`, true);
-  const preview = engine.getBoundary()
-    ? { ...body, boundaries: `«${(boundaries || []).length} marks»` }
-    : body;
+  const preview = { ...requestBody, boundaries: `«${(boundaries || []).length} marks»` };
   outputEl.append(JSON.stringify(preview, null, 2));
 
-  currentBlob = blob; currentFormat = body.output.format;
+  currentBlob = blob; currentFormat = requestBody?.output?.format || 'wav';
   downloadBtn.disabled = false;
 
   buildPeaks(blob).then(p => {
@@ -746,7 +710,7 @@ <h1>Readium speech server <span class="em">demo</span></h1>
     monitor.classList.add('show'); sizeCanvas(); drawWave(0);
   });
   showMetrics(blob, serverMs);
-});
+};
 
 async function showMetrics(blob, serverMs) {
   const out = [`<span class="metric">response <b>${Math.round(serverMs)} ms</b></span>`,
@@ -761,18 +725,11 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 
 /* transport wiring */
 playBtn.addEventListener('click', () => { if (speechNavigator.getState() === 'playing') speechNavigator.pause(); else speechNavigator.play(); });
-speechNavigator.on('start', () => { playBtn.classList.add('playing'); onair?.classList.add('live'); cancelAnimationFrame(waveRafId); waveTick(); });
-speechNavigator.on('resume', () => { playBtn.classList.add('playing'); onair?.classList.add('live'); cancelAnimationFrame(waveRafId); waveTick(); });
-speechNavigator.on('pause', () => { playBtn.classList.remove('playing'); onair?.classList.remove('live'); cancelAnimationFrame(waveRafId); drawWave(progressNow()); });
-speechNavigator.on('stop', () => { playBtn.classList.remove('playing'); onair?.classList.remove('live'); cancelAnimationFrame(waveRafId); drawWave(0); });
-speechNavigator.on('end', () => { playBtn.classList.remove('playing'); onair?.classList.remove('live'); cancelAnimationFrame(waveRafId); drawWave(1); });
 function seek(clientX) {
-  const d = dur(); if (!d) return;
+  if (!peaks) return;
   const r = waveEl.getBoundingClientRect();
   const ratio = Math.min(1, Math.max(0, (clientX-r.left)/r.width));
-  engine.audioEl.currentTime = ratio*d;
-  engine.syncBoundary();
-  drawWave(ratio); timeEl.textContent = fmtTime(engine.audioEl.currentTime);
+  seekTo(ratio);
 }
 waveEl.addEventListener('click', e => seek(e.clientX));
 window.addEventListener('resize', () => { if (peaks) { sizeCanvas(); drawWave(progressNow()); } else { drawIdle(); } });
@@ -789,8 +746,10 @@ <h1>Readium speech server <span class="em">demo</span></h1>
 const onVoicePick = () => { updateControlsForVoice(); updateCurl(); };
 voiceEl.addEventListener('change', onVoicePick);
 voiceEl.addEventListener('input', onVoicePick);
-formatEl.addEventListener('change', () => { updateControlsForVoice(); updateCurl(); });
-for (const e of [textEl, speedEl, pitchEl, bitrateEl, sampleRateEl, ssmlEl, boundaryEl]) {
+const onFormatPrefChange = async () => { await rebuildEngine(); updateControlsForVoice(); updateCurl(); };
+formatEl.addEventListener('change', onFormatPrefChange);
+strategyEl.addEventListener('change', onFormatPrefChange);
+for (const e of [textEl, speedEl, pitchEl, ssmlEl, boundaryEl]) {
   e.addEventListener('input', updateCurl); e.addEventListener('change', updateCurl);
 }
 textEl.addEventListener('keydown', e => { if ((e.metaKey||e.ctrlKey) && e.key === 'Enter') speak(); });