diff --git a/doc/lib/js/@moq/watch.md b/doc/lib/js/@moq/watch.md
index dac976bc55..190a66fc4d 100644
--- a/doc/lib/js/@moq/watch.md
+++ b/doc/lib/js/@moq/watch.md
@@ -70,6 +70,9 @@ a real bundler (the examples below).
 - `paused`: Pause playback (boolean)
 - `muted`: Mute audio (boolean)
 - `volume`: Audio volume (0 to 1, default: 1)
+- `latency`: Latency target. `"real-time"` (default) derives it from RTT, or a number sets a fixed jitter buffer in ms. Collapses `latency-min` and `latency-max` to one value (minimize latency).
+- `latency-min`: Latency floor (the jitter/startup buffer). Same units as `latency`; leaves the ceiling untouched.
+- `latency-max`: Latency ceiling. `"real-time"` (default) minimizes latency; a number caps at that many ms. A ceiling above the floor enables [buffered playback](#buffered-playback): build up a buffer from future-dated frames instead of skipping ahead.
 - `catalog-format`: Catalog format. One of `"hang"`, `"msf"` (see [MSF](/concept/standard/msf)), or `"manual"` (supply the catalog yourself). When omitted, the format is auto-detected from the broadcast `name` extension (`.hang` or `.msf`), falling back to `"hang"`.
 
 ## Catalog Formats
@@ -139,6 +142,74 @@ el.catalog = myCatalog;
 > `"msf"`) tears down the previous fetch loop, which clears `catalog`. Set the
 > catalog *after* switching to `"manual"`, not before.
 
+## Buffered playback
+
+Latency is a **range**, `[latency-min, latency-max]`. By default the range is
+collapsed (`latency` sets both to one value) and `@moq/watch` minimizes latency:
+it anchors playback to the earliest frame seen relative to its timestamp and skips
+ahead whenever the buffer grows past the target. That is right for live
+conferencing, but wrong for content written *faster than real-time* with
+timestamps in the future, such as a text-to-speech response streamed all at once.
+
+Open the range, by setting a `latency-max` above the floor, to anchor playback to
+the first frame received and play through at the encoded pace. The buffer is
+allowed to float anywhere between the floor and the ceiling without skipping:
+
+```html
+<moq-watch url="https://relay.example.com/anon" name="bot/tts.hang"
+    latency-min="100" latency-max="30000">
+    <canvas></canvas>
+</moq-watch>
+```
+
+In JavaScript, `latency` takes either a scalar (collapsed, minimize) or a range
+object. The `latencyMin` / `latencyMax` properties are read-modify-write sugar
+over the same `latency` value:
+
+```typescript
+const el = document.querySelector("moq-watch")!;
+el.latency = { min: 100, max: 30_000 }; // floor 100ms, ceiling 30s
+// equivalently, set the bounds independently:
+el.latencyMin = 100;     // floor: start after 100ms buffered
+el.latencyMax = 30_000;  // ceiling: never skip until 30s buffered
+```
+
+`latency-min` is the jitter/startup buffer (it can also be `"real-time"` for an
+adaptive floor). `latency-max` is the ceiling, and it has two forms:
+
+- a **number** (ms): buffer freely up to the cap, then skip ahead, so latency
+  stays at most that far behind the newest frame.
+- **`"real-time"`** (the default) or any value `<= latency-min`: collapsed, i.e.
+  today's minimize-latency behavior.
+
+The ceiling is always finite: the buffer is bounded by `latency-max` rather than
+growing without limit. The mechanism is the same in every case: the playhead is
+anchored on the first frame and only re-anchored (skipped forward) when keeping it
+would push latency past `latency-max`. Minimize is just the degenerate case where
+the ceiling equals the floor.
+
+The buffered lookahead is held cheaply. The decoded audio ring only holds the
+**floor** (`latency-min`) worth of PCM; everything above it stays upstream as
+encoded frames, and the decoder applies backpressure (stops decoding ahead) until
+the playhead nears each frame. So a large `latency-max` costs encoded bytes, not
+seconds of decoded PCM.
+
+At each new utterance, call `reset()` to flush the audio buffer and re-anchor
+playback to the next frame. The producer can interrupt by writing a new utterance
+(optionally on a new track) and the viewer calls `reset()` to drop whatever was
+still buffered:
+
+```typescript
+el.reset();
+```
+
+This removes the need to pace writes on the producer: emit the whole response as
+fast as possible with correct (future) timestamps, and `reset()` on interruption.
+
+> Buffered playback uses the WebCodecs path (a `<canvas>` child). It does not
+> apply to the MSE `<video>` path. Set the range before the broadcast starts
+> decoding; changing it mid-stream takes effect on the next decoder.
+
 ### Custom tracks and catalog sections
 
 A broadcast can carry arbitrary application tracks (for example a `meta.json`
diff --git a/js/watch/src/audio/buffer.ts b/js/watch/src/audio/buffer.ts
index 9ca13c5d87..1e2c4fd1d3 100644
--- a/js/watch/src/audio/buffer.ts
+++ b/js/watch/src/audio/buffer.ts
@@ -1,8 +1,60 @@
 import { Time } from "@moq/net";
 import { Effect, type Getter, Signal } from "@moq/signals";
-import type { Data, InitPost, InitShared, Latency, State } from "./render";
+import type { Data, InitPost, InitShared, Latency, Reset, State } from "./render";
 import { allocSharedRingBuffer, SharedRingBuffer } from "./shared-ring-buffer";
 
+/**
+ * Timestamp-based backpressure for buffered playback. The decoded PCM ring only holds the latency
+ * floor; everything above it (the buffered lookahead, up to the ceiling) stays upstream as encoded
+ * Opus. `wait(timestamp)` stays pending until the playhead is within `headroom` (the floor) of
+ * `timestamp`, so the decode loop holds a frame as Opus instead of decoding it too far ahead of the
+ * floor-sized ring. Both transports share this; they differ only in how they observe the playhead
+ * (Atomics poll vs worklet state messages). A no-op when not buffered (the ring bounds itself).
+ */
+class Backpressure {
+	readonly #enabled: boolean;
+	#headroom: Time.Micro;
+	#waiters: Array<{ timestamp: Time.Micro; resolve: () => void }> = [];
+
+	constructor(enabled: boolean, headroom: Time.Micro) {
+		this.#enabled = enabled;
+		this.#headroom = headroom;
+	}
+
+	// Move the gate as the floor changes (e.g. "real-time" jitter tracking RTT).
+	setHeadroom(headroom: Time.Micro): void {
+		this.#headroom = headroom;
+	}
+
+	wait(timestamp: Time.Micro, playhead: Time.Micro): Promise<void> {
+		if (!this.#enabled) return Promise.resolve();
+		if (playhead >= ((timestamp - this.#headroom) | 0)) return Promise.resolve();
+		return new Promise((resolve) => this.#waiters.push({ timestamp, resolve }));
+	}
+
+	// Resolve every waiter the playhead has reached. Thresholds are recomputed live so a changed
+	// headroom takes effect on queued waiters too.
+	advance(playhead: Time.Micro): void {
+		if (this.#waiters.length === 0) return;
+		this.#waiters = this.#waiters.filter(({ timestamp, resolve }) => {
+			if (playhead < ((timestamp - this.#headroom) | 0)) return true;
+			resolve();
+			return false;
+		});
+	}
+
+	// Resolve everything unconditionally (reset/close): never strand a decode loop.
+	flush(): void {
+		for (const { resolve } of this.#waiters) resolve();
+		this.#waiters = [];
+	}
+}
+
+/** Convert a sample count to a Time.Micro duration at the given sample rate. */
+function samplesToMicro(samples: number, rate: number): Time.Micro {
+	return Time.Micro.fromSecond((samples / rate) as Time.Second);
+}
+
 /**
  * Unified interface for the audio buffer between the main thread and the AudioWorklet.
  *
@@ -22,6 +74,17 @@ export interface AudioBuffer {
 	/** Update the target latency in samples. */
 	setLatency(samples: number): void;
 
+	/** Flush buffered samples and re-stall, ready to anchor the next utterance (buffered mode). */
+	reset(): void;
+
+	/**
+	 * Resolve once the playhead is near enough to decode a frame at `timestamp`. In buffered mode this
+	 * applies backpressure: it stays pending while decoding `timestamp` would run more than the latency
+	 * floor ahead of the playhead, so the caller holds the (encoded) frame instead of decoding it too
+	 * far ahead of the floor-sized ring. Resolves immediately when not buffered (the ring bounds itself).
+	 */
+	wait(timestamp: Time.Micro): Promise<void>;
+
 	/** Current playback timestamp (derived from reader position). */
 	readonly timestamp: Getter<Time.Micro>;
 
@@ -50,13 +113,14 @@ export function createAudioBuffer(
 	channels: number,
 	rate: number,
 	latencySamples: number,
+	buffered = false,
 ): AudioBuffer {
 	if (supportsSharedArrayBuffer()) {
 		console.log("[audio] using SharedArrayBuffer audio buffer");
-		return new SharedAudioBuffer(worklet, channels, rate, latencySamples);
+		return new SharedAudioBuffer(worklet, channels, rate, latencySamples, buffered);
 	}
 	console.log("[audio] using postMessage audio buffer (SharedArrayBuffer unavailable)");
-	return new PostAudioBuffer(worklet, channels, rate, latencySamples);
+	return new PostAudioBuffer(worklet, channels, rate, latencySamples, buffered);
 }
 
 /** SharedArrayBuffer-backed implementation. Writes go directly into shared memory. */
@@ -72,16 +136,21 @@ class SharedAudioBuffer implements AudioBuffer {
 	readonly #stalled = new Signal<boolean>(true);
 	readonly stalled: Getter<boolean> = this.#stalled;
 
+	#backpressure: Backpressure;
+
 	#signals = new Effect();
 
-	constructor(worklet: AudioWorkletNode, channels: number, rate: number, latencySamples: number) {
+	constructor(worklet: AudioWorkletNode, channels: number, rate: number, latencySamples: number, buffered: boolean) {
 		this.#worklet = worklet;
 		this.channels = channels;
 		this.rate = rate;
 
-		// Capacity needs headroom above LATENCY for overflow protection.
+		// The ring holds the latency floor as decoded PCM (headroom above it for overflow). In
+		// buffered mode the lookahead above the floor stays encoded upstream, held back by `wait()`.
 		const capacity = Math.max(rate, latencySamples * 2);
-		const init = allocSharedRingBuffer(channels, capacity, rate);
+		this.#backpressure = new Backpressure(buffered, samplesToMicro(latencySamples, rate));
+
+		const init = allocSharedRingBuffer(channels, capacity, rate, buffered);
 		this.#ring = new SharedRingBuffer(init);
 		this.#ring.setLatency(latencySamples);
 
@@ -90,8 +159,13 @@ class SharedAudioBuffer implements AudioBuffer {
 
 		// Poll the shared control array and reflect it into signals.
 		this.#signals.interval(() => {
+			const stalled = this.#ring.stalled;
 			this.#timestamp.set(this.#ring.timestamp);
-			this.#stalled.set(this.#ring.stalled);
+			this.#stalled.set(stalled);
+			// While stalled the playhead is parked, so release the decode loop to refill the floor;
+			// once playing, hold it to ~the floor ahead.
+			if (stalled) this.#backpressure.flush();
+			else this.#backpressure.advance(this.#ring.timestamp);
 		}, 50);
 	}
 
@@ -100,6 +174,8 @@ class SharedAudioBuffer implements AudioBuffer {
 	}
 
 	setLatency(samples: number): void {
+		this.#backpressure.setHeadroom(samplesToMicro(samples, this.rate));
+
 		// Grow the ring (preserving the unread window) if it's too small for the new latency.
 		if (this.#ring.capacity < samples * 1.5) {
 			const newCapacity = Math.max(this.rate, samples * 2);
@@ -113,7 +189,19 @@ class SharedAudioBuffer implements AudioBuffer {
 		}
 	}
 
+	reset(): void {
+		this.#ring.reset();
+		this.#backpressure.flush(); // the old timeline is gone; let the decode loop re-anchor
+	}
+
+	wait(timestamp: Time.Micro): Promise<void> {
+		// Stalled = still filling the floor (bootstrap or underflow): let frames through to refill.
+		if (this.#ring.stalled) return Promise.resolve();
+		return this.#backpressure.wait(timestamp, this.#ring.timestamp);
+	}
+
 	close(): void {
+		this.#backpressure.flush(); // never leave a decode loop awaiting a closed buffer
 		this.#signals.close();
 	}
 }
@@ -130,15 +218,20 @@ class PostAudioBuffer implements AudioBuffer {
 	readonly #stalled = new Signal<boolean>(true);
 	readonly stalled: Getter<boolean> = this.#stalled;
 
+	// Backpressure runs off the playhead the worklet reports in its state messages.
+	#backpressure: Backpressure;
+
 	#signals = new Effect();
 
-	constructor(worklet: AudioWorkletNode, channels: number, rate: number, latencySamples: number) {
+	constructor(worklet: AudioWorkletNode, channels: number, rate: number, latencySamples: number, buffered: boolean) {
 		this.#worklet = worklet;
 		this.channels = channels;
 		this.rate = rate;
 
+		this.#backpressure = new Backpressure(buffered, samplesToMicro(latencySamples, rate));
+
 		const latency = Time.Milli.fromSecond((latencySamples / rate) as Time.Second);
-		const msg: InitPost = { type: "init-post", channels, rate, latency };
+		const msg: InitPost = { type: "init-post", channels, rate, latency, buffered };
 		worklet.port.postMessage(msg);
 
 		// Listen for state updates from the worklet.
@@ -147,6 +240,10 @@ class PostAudioBuffer implements AudioBuffer {
 			if (data?.type === "state") {
 				this.#timestamp.set(data.timestamp);
 				this.#stalled.set(data.stalled);
+				// While stalled the playhead is parked, so release the decode loop to refill the floor;
+				// once playing, hold it to ~the floor ahead.
+				if (data.stalled) this.#backpressure.flush();
+				else this.#backpressure.advance(data.timestamp);
 			}
 		});
 		// addEventListener on a MessagePort requires start() to begin delivery.
@@ -164,12 +261,29 @@ class PostAudioBuffer implements AudioBuffer {
 	}
 
 	setLatency(samples: number): void {
+		this.#backpressure.setHeadroom(samplesToMicro(samples, this.rate));
+
 		const latency = Time.Milli.fromSecond((samples / this.rate) as Time.Second);
 		const msg: Latency = { type: "latency", latency };
 		this.#worklet.port.postMessage(msg);
 	}
 
+	reset(): void {
+		const msg: Reset = { type: "reset" };
+		this.#worklet.port.postMessage(msg);
+		this.#backpressure.flush(); // the old timeline is gone; let the decode loop re-anchor
+	}
+
+	wait(timestamp: Time.Micro): Promise<void> {
+		// Stalled = still filling the floor (bootstrap or underflow): let frames through to refill.
+		if (this.#stalled.peek()) return Promise.resolve();
+		// Uses the worklet-reported playhead, which lags by a state-message interval; the floor's
+		// headroom covers that. The worklet still drops the oldest if a frame slips through.
+		return this.#backpressure.wait(timestamp, this.#timestamp.peek());
+	}
+
 	close(): void {
+		this.#backpressure.flush(); // never leave a decode loop awaiting a closed buffer
 		this.#signals.close();
 	}
 }
diff --git a/js/watch/src/audio/decoder.ts b/js/watch/src/audio/decoder.ts
index ce2ec24793..705ebaf685 100644
--- a/js/watch/src/audio/decoder.ts
+++ b/js/watch/src/audio/decoder.ts
@@ -60,12 +60,28 @@ export class Decoder {
 
 	#signals = new Effect();
 
+	// How much buffered audio the container consumer retains before skipping
+	// ahead. This must be the latency CEILING (maxBuffer), not the floor
+	// (buffer): in buffered playback the producer writes faster than real-time
+	// with future PTS, so the group span legitimately exceeds the floor and
+	// would otherwise be skipped. When collapsed, maxBuffer equals the floor.
+	//
+	// Held in a plain Signal driven by a running effect (below) rather than a
+	// lazy `computed`: the container consumer only `.peek()`s this (it never
+	// subscribes), and an unsubscribed computed peeks as `undefined`, which
+	// would make the consumer's threshold NaN and skip every group.
+	#consumerLatency = new Signal<Time.Milli>(Time.Milli.zero);
+
 	constructor(source: Source, props?: DecoderProps) {
 		this.source = source;
 		this.source.supported.set(supported); // super hacky
 
 		this.enabled = Signal.from(props?.enabled ?? false);
 
+		this.#signals.run((effect) => {
+			this.#consumerLatency.set(effect.get(this.source.sync.maxBuffer));
+		});
+
 		this.#signals.run(this.#runWorklet.bind(this));
 		this.#signals.run(this.#runEnabled.bind(this));
 		this.#signals.run(this.#runLatency.bind(this));
@@ -116,9 +132,10 @@ export class Decoder {
 			// Initial target latency in samples.
 			const latency = this.source.sync.buffer.peek();
 			const latencySamples = Math.ceil(sampleRate * Time.Second.fromMilli(latency));
+			const buffered = this.source.sync.buffered.peek();
 
 			// Let the factory pick the best transport (SharedArrayBuffer or postMessage).
-			const ring = createAudioBuffer(worklet, channelCount, sampleRate, latencySamples);
+			const ring = createAudioBuffer(worklet, channelCount, sampleRate, latencySamples, buffered);
 			this.#ring = ring;
 			effect.cleanup(() => {
 				ring.close();
@@ -194,7 +211,7 @@ export class Decoder {
 		// TODO include JITTER_UNDERHEAD
 		const consumer = new Container.Consumer(sub, {
 			format,
-			latency: this.source.sync.buffer,
+			latency: this.#consumerLatency,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -254,6 +271,10 @@ export class Decoder {
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
+				// Backpressure: in buffered mode this holds the encoded frame until the playhead nears
+				// it, keeping the lookahead above the floor as Opus instead of decoded PCM. No-op live.
+				await this.#ring?.wait(frame.timestamp as Time.Micro);
+
 				const chunk = new EncodedAudioChunk({
 					type: frame.keyframe ? "key" : "delta",
 					data: frame.data,
@@ -281,7 +302,7 @@ export class Decoder {
 
 		const consumer = new Container.Consumer(sub, {
 			format: new Container.Cmaf.Format(init),
-			latency: this.source.sync.buffer,
+			latency: this.#consumerLatency,
 		});
 		effect.cleanup(() => consumer.close());
 
@@ -326,6 +347,10 @@ export class Decoder {
 					bytesReceived: (stats?.bytesReceived ?? 0) + frame.data.byteLength,
 				}));
 
+				// Backpressure: in buffered mode this holds the encoded frame until the playhead nears
+				// it, keeping the lookahead above the floor as Opus instead of decoded PCM. No-op live.
+				await this.#ring?.wait(frame.timestamp);
+
 				if (decoder.state === "closed") break;
 				decoder.decode(
 					new EncodedAudioChunk({
@@ -404,6 +429,12 @@ export class Decoder {
 		});
 	}
 
+	// Flush the audio buffer and re-stall, re-anchoring playback to the next frame.
+	// Use in buffered mode at an utterance boundary (see Sync.reset).
+	reset(): void {
+		this.#ring?.reset();
+	}
+
 	close() {
 		this.#signals.close();
 	}
diff --git a/js/watch/src/audio/render-worklet.ts b/js/watch/src/audio/render-worklet.ts
index 439ee3b397..e8ec2397c6 100644
--- a/js/watch/src/audio/render-worklet.ts
+++ b/js/watch/src/audio/render-worklet.ts
@@ -27,6 +27,9 @@ class Render extends AudioWorkletProcessor {
 			} else if (msg.type === "latency") {
 				// Only meaningful in post mode.
 				if (this.#backend instanceof AudioRingBuffer) this.#backend.resize(msg.latency);
+			} else if (msg.type === "reset") {
+				// Only meaningful in post mode; shared mode resets via the control array.
+				if (this.#backend instanceof AudioRingBuffer) this.#backend.reset();
 			}
 		};
 	}
diff --git a/js/watch/src/audio/render.ts b/js/watch/src/audio/render.ts
index 09f23efe25..40ea9a220c 100644
--- a/js/watch/src/audio/render.ts
+++ b/js/watch/src/audio/render.ts
@@ -1,7 +1,7 @@
 import type { Time } from "@moq/net";
 import type { SharedRingBufferInit } from "./shared-ring-buffer";
 
-export type Message = InitShared | InitPost | Data | Latency;
+export type Message = InitShared | InitPost | Data | Latency | Reset;
 export type ToMain = State;
 
 /** Init message when SharedArrayBuffer is available. */
@@ -15,6 +15,14 @@ export interface InitPost {
 	channels: number;
 	rate: number;
 	latency: Time.Milli;
+	// Buffered mode: anchor to the first frame and play through; the ring is sized to the floor and
+	// the lookahead above it is held back upstream (the main thread applies the backpressure).
+	buffered: boolean;
+}
+
+/** Flush the buffer and re-stall (fallback path only; shared path resets via Atomics). */
+export interface Reset {
+	type: "reset";
 }
 
 /** Audio samples sent via postMessage (fallback path only). */
diff --git a/js/watch/src/audio/ring-buffer.test.ts b/js/watch/src/audio/ring-buffer.test.ts
index c8ab5e4d86..0ed5bb101a 100644
--- a/js/watch/src/audio/ring-buffer.test.ts
+++ b/js/watch/src/audio/ring-buffer.test.ts
@@ -633,3 +633,58 @@ describe("resize", () => {
 		}
 	});
 });
+
+describe("buffered mode", () => {
+	function createBuffered(latency: number) {
+		return new AudioRingBuffer({ rate: 1000, channels: 1, latency: latency as Time.Milli, buffered: true });
+	}
+
+	it("anchors to the first frame and un-stalls at the latency target", () => {
+		const buffer = createBuffered(50);
+		expect(buffer.stalled).toBe(true);
+		write(buffer, 2000 as Time.Milli, 100, { channels: 1, value: 0.1 });
+		expect(buffer.stalled).toBe(false);
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(2000 as Time.Milli);
+	});
+
+	it("plays frames in order within the floor-sized ring without skipping ahead", () => {
+		// 600ms floor at 1000Hz -> 1200-sample ring, comfortably holding the 1000-sample utterance
+		// the backpressure loop would feed it. A non-buffered ring would have skipped to write-latency.
+		const buffer = createBuffered(600);
+		for (let i = 0; i < 10; i++) {
+			write(buffer, (2000 + i * 100) as Time.Milli, 100, { channels: 1, value: (i + 1) / 10 });
+		}
+		expect(buffer.length).toBe(1000);
+
+		const first = read(buffer, 100, 1);
+		expect(first[0][0]).toBeCloseTo(0.1, 5);
+		const second = read(buffer, 100, 1);
+		expect(second[0][0]).toBeCloseTo(0.2, 5);
+	});
+
+	it("reset re-stalls and re-anchors to the next utterance", () => {
+		const buffer = createBuffered(50);
+		write(buffer, 2000 as Time.Milli, 100, { channels: 1, value: 0.1 });
+		read(buffer, 50, 1);
+
+		buffer.reset();
+		expect(buffer.stalled).toBe(true);
+
+		write(buffer, 500 as Time.Milli, 100, { channels: 1, value: 0.9 });
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(500 as Time.Milli);
+		const out = read(buffer, 100, 1);
+		expect(out[0][0]).toBeCloseTo(0.9, 5);
+	});
+
+	it("drops the oldest samples once the ring fills beyond the floor", () => {
+		// 50ms floor at 1000Hz -> 50-sample floor, 100-sample ring. Backpressure normally keeps the
+		// decode loop from running this far ahead; if it slips, the ring drops its oldest as a backstop.
+		const buffer = createBuffered(50);
+
+		write(buffer, 0 as Time.Milli, 100, { channels: 1, value: 0.1 }); // [0, 100)
+		write(buffer, 100 as Time.Milli, 100, { channels: 1, value: 0.2 }); // exceeds 100-sample ring; drops [0, 100)
+
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(100 as Time.Milli);
+		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.2, 5);
+	});
+});
diff --git a/js/watch/src/audio/ring-buffer.ts b/js/watch/src/audio/ring-buffer.ts
index 3048607a33..83adc03309 100644
--- a/js/watch/src/audio/ring-buffer.ts
+++ b/js/watch/src/audio/ring-buffer.ts
@@ -9,23 +9,45 @@ export class AudioRingBuffer {
 	readonly channels: number;
 	#stalled = true;
 
-	constructor(props: { rate: number; channels: number; latency: Time.Milli }) {
+	// Buffered mode: anchor to the first sample, play through without skipping ahead.
+	readonly #buffered: boolean;
+	// Un-stall threshold in samples (how much to buffer before playback starts).
+	#latencySamples: number;
+	// Whether the read/write indices have been anchored to the first inserted sample.
+	#anchored = false;
+
+	constructor(props: {
+		rate: number;
+		channels: number;
+		latency: Time.Milli;
+		buffered?: boolean;
+	}) {
 		if (props.channels <= 0) throw new Error("invalid channels");
 		if (props.rate <= 0) throw new Error("invalid sample rate");
 		if (props.latency <= 0) throw new Error("invalid latency");
 
-		const samples = Math.ceil(props.rate * Time.Second.fromMilli(props.latency));
-		if (samples === 0) throw new Error("empty buffer");
+		this.#latencySamples = Math.ceil(props.rate * Time.Second.fromMilli(props.latency));
+		if (this.#latencySamples === 0) throw new Error("empty buffer");
 
 		this.rate = props.rate;
 		this.channels = props.channels;
+		this.#buffered = props.buffered ?? false;
+
+		// The ring holds the latency floor as PCM. Buffered mode gives it headroom above the floor
+		// so the backpressure-paced decode loop (on the main thread) doesn't overflow-drop; the rest
+		// of the lookahead stays encoded upstream.
+		const capacity = this.#capacityFor(this.#latencySamples);
 
 		this.#buffer = [];
 		for (let i = 0; i < this.channels; i++) {
-			this.#buffer[i] = new Float32Array(samples);
+			this.#buffer[i] = new Float32Array(capacity);
 		}
 	}
 
+	#capacityFor(latencySamples: number): number {
+		return this.#buffered ? latencySamples * 2 : latencySamples;
+	}
+
 	get stalled(): boolean {
 		return this.#stalled;
 	}
@@ -43,7 +65,9 @@ export class AudioRingBuffer {
 	}
 
 	resize(latency: Time.Milli): void {
-		const newCapacity = Math.ceil(this.rate * Time.Second.fromMilli(latency));
+		this.#latencySamples = Math.ceil(this.rate * Time.Second.fromMilli(latency));
+
+		const newCapacity = this.#capacityFor(this.#latencySamples);
 		if (newCapacity === this.capacity) return;
 		if (newCapacity === 0) throw new Error("empty buffer");
 
@@ -80,6 +104,14 @@ export class AudioRingBuffer {
 		let start = Math.round(Time.Second.fromMicro(timestamp) * this.rate);
 		let samples = data[0].length;
 
+		// Buffered mode: anchor both indices to the first sample so we play from its
+		// timestamp instead of gap-filling silence from index 0 to a large timestamp.
+		if (this.#buffered && !this.#anchored) {
+			this.#readIndex = start;
+			this.#writeIndex = start;
+			this.#anchored = true;
+		}
+
 		// Ignore samples that are too old (before the read index)
 		let offset = this.#readIndex - start;
 		if (offset > samples) {
@@ -137,6 +169,20 @@ export class AudioRingBuffer {
 		if (end > this.#writeIndex) {
 			this.#writeIndex = end;
 		}
+
+		// Start playback once we've buffered the latency target. In buffered mode the cap
+		// is large, so we usually un-stall here rather than via the overflow path above.
+		if (this.#buffered && this.length >= this.#latencySamples) {
+			this.#stalled = false;
+		}
+	}
+
+	// Flush all buffered samples and re-stall, ready to anchor the next utterance.
+	reset(): void {
+		this.#readIndex = 0;
+		this.#writeIndex = 0;
+		this.#stalled = true;
+		this.#anchored = false;
 	}
 
 	read(output: Float32Array[]): number {
diff --git a/js/watch/src/audio/shared-ring-buffer.test.ts b/js/watch/src/audio/shared-ring-buffer.test.ts
index d7b8f8a0bd..49129915ed 100644
--- a/js/watch/src/audio/shared-ring-buffer.test.ts
+++ b/js/watch/src/audio/shared-ring-buffer.test.ts
@@ -564,3 +564,69 @@ describe("SharedRingBuffer.resize", () => {
 		}
 	});
 });
+
+describe("buffered mode", () => {
+	function createBuffered(latency: number) {
+		// Capacity large enough to hold a whole utterance without overflow.
+		const init = allocSharedRingBuffer(1, 10000, 1000, true);
+		const buffer = new SharedRingBuffer(init);
+		buffer.setLatency(latency);
+		return buffer;
+	}
+
+	it("anchors to the first frame instead of index 0", () => {
+		const buffer = createBuffered(50);
+		// First frame at a future timestamp; READ should snap to it, not gap-fill from 0.
+		insert(buffer, 2000, 100, { channels: 1, value: 0.1 });
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(2000 as Time.Milli);
+		expect(buffer.stalled).toBe(false); // 100 buffered >= 50 latency
+	});
+
+	it("plays through the whole buffer without skipping ahead", () => {
+		const buffer = createBuffered(50);
+		// Dump a 1s utterance faster than real-time with consecutive future timestamps.
+		for (let i = 0; i < 10; i++) {
+			insert(buffer, 2000 + i * 100, 100, { channels: 1, value: (i + 1) / 10 });
+		}
+		expect(buffer.length).toBe(1000);
+
+		// Read the oldest frame first; a non-buffered ring would have skipped to write-latency.
+		const first = read(buffer, 100, 1);
+		expect(first[0][0]).toBeCloseTo(0.1, 5);
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(2100 as Time.Milli);
+
+		const second = read(buffer, 100, 1);
+		expect(second[0][0]).toBeCloseTo(0.2, 5);
+	});
+
+	it("reset re-stalls and re-anchors to the next utterance", () => {
+		const buffer = createBuffered(50);
+		insert(buffer, 2000, 100, { channels: 1, value: 0.1 });
+		read(buffer, 50, 1);
+
+		buffer.reset();
+		expect(buffer.stalled).toBe(true);
+
+		// A new utterance with its own timestamps anchors fresh.
+		insert(buffer, 500, 100, { channels: 1, value: 0.9 });
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(500 as Time.Milli);
+		const out = read(buffer, 100, 1);
+		expect(out[0][0]).toBeCloseTo(0.9, 5);
+	});
+
+	it("drops the oldest samples once the buffer exceeds the cap", () => {
+		// 200-sample capacity at 1000Hz = a 200ms cap.
+		const init = allocSharedRingBuffer(1, 200, 1000, true);
+		const buffer = new SharedRingBuffer(init);
+		buffer.setLatency(50);
+
+		insert(buffer, 0, 100, { channels: 1, value: 0.1 }); // [0, 100)
+		insert(buffer, 100, 100, { channels: 1, value: 0.2 }); // [100, 200)
+		insert(buffer, 200, 100, { channels: 1, value: 0.3 }); // exceeds cap; drops [0, 100)
+
+		// READ skipped forward to stay within the cap; oldest frame is gone.
+		expect(Time.Milli.fromMicro(buffer.timestamp)).toBe(100 as Time.Milli);
+		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.2, 5);
+		expect(read(buffer, 100, 1)[0][0]).toBeCloseTo(0.3, 5);
+	});
+});
diff --git a/js/watch/src/audio/shared-ring-buffer.ts b/js/watch/src/audio/shared-ring-buffer.ts
index 2954fd7729..2add1419b1 100644
--- a/js/watch/src/audio/shared-ring-buffer.ts
+++ b/js/watch/src/audio/shared-ring-buffer.ts
@@ -13,9 +13,16 @@ export interface SharedRingBufferInit {
 	rate: number;
 	samples: SharedArrayBuffer; // channels * capacity * Float32Array.BYTES_PER_ELEMENT bytes
 	control: SharedArrayBuffer; // CONTROL_SLOTS * Int32Array.BYTES_PER_ELEMENT bytes
+	// Buffered mode: anchor to the first sample and never skip ahead on read.
+	buffered: boolean;
 }
 
-export function allocSharedRingBuffer(channels: number, capacity: number, rate: number): SharedRingBufferInit {
+export function allocSharedRingBuffer(
+	channels: number,
+	capacity: number,
+	rate: number,
+	buffered = false,
+): SharedRingBufferInit {
 	if (channels <= 0) throw new Error("invalid channels");
 	if (capacity <= 0) throw new Error("invalid capacity");
 	if (rate <= 0) throw new Error("invalid sample rate");
@@ -27,7 +34,7 @@ export function allocSharedRingBuffer(channels: number, capacity: number, rate:
 	const ctrl = new Int32Array(control);
 	Atomics.store(ctrl, STALLED, 1);
 
-	return { channels, capacity, rate, samples, control };
+	return { channels, capacity, rate, samples, control, buffered };
 }
 
 /** Modular i32 max: returns a if a is ahead of b, else b. */
@@ -58,15 +65,20 @@ export class SharedRingBuffer {
 	readonly channels: number;
 	readonly capacity: number;
 	readonly rate: number;
+	readonly buffered: boolean;
 	readonly init: SharedRingBufferInit;
 
 	#control: Int32Array;
 	#samples: Float32Array[];
 
+	// Whether READ/WRITE have been anchored to the first inserted sample (buffered mode).
+	#anchored = false;
+
 	constructor(init: SharedRingBufferInit) {
 		this.channels = init.channels;
 		this.capacity = init.capacity;
 		this.rate = init.rate;
+		this.buffered = init.buffered;
 		this.init = init;
 
 		this.#control = new Int32Array(init.control);
@@ -89,6 +101,14 @@ export class SharedRingBuffer {
 		const originalLength = data[0].length;
 		let offset = 0;
 
+		// Buffered mode: anchor READ/WRITE to the first sample so playback starts at its
+		// timestamp, instead of skipping ahead or gap-filling silence from index 0.
+		if (this.buffered && !this.#anchored) {
+			Atomics.store(this.#control, READ, start | 0);
+			Atomics.store(this.#control, WRITE, start | 0);
+			this.#anchored = true;
+		}
+
 		const end = (start + originalLength) | 0;
 
 		// Trim old: discard samples before the read index
@@ -158,8 +178,9 @@ export class SharedRingBuffer {
 
 		// Latency skip: if buffered data exceeds LATENCY, skip ahead.
 		// CAS ensures we never step backward relative to a concurrent writer advance.
+		// Disabled in buffered mode, where we deliberately play through the whole buffer.
 		const buffered = (write - read) | 0;
-		if (latency > 0 && buffered > latency) {
+		if (!this.buffered && latency > 0 && buffered > latency) {
 			const skipTo = (write - latency) | 0;
 			read = casAdvance(this.#control, READ, skipTo);
 		}
@@ -188,6 +209,17 @@ export class SharedRingBuffer {
 		Atomics.store(this.#control, LATENCY, samples);
 	}
 
+	/**
+	 * Flush buffered samples and re-stall, ready to anchor the next utterance (buffered mode).
+	 * Main thread only. The worklet reader sees STALLED and stops until the next insert.
+	 */
+	reset(): void {
+		this.#anchored = false;
+		Atomics.store(this.#control, STALLED, 1);
+		const write = Atomics.load(this.#control, WRITE);
+		Atomics.store(this.#control, READ, write);
+	}
+
 	/**
 	 * Allocate a new ring with `newCapacity` samples and copy the unread window
 	 * [READ, WRITE) plus control state into it. Used when growing capacity so
@@ -201,8 +233,9 @@ export class SharedRingBuffer {
 	 * by READ/WRITE elsewhere.
 	 */
 	resize(newCapacity: number): SharedRingBuffer {
-		const init = allocSharedRingBuffer(this.channels, newCapacity, this.rate);
+		const init = allocSharedRingBuffer(this.channels, newCapacity, this.rate, this.buffered);
 		const dst = new SharedRingBuffer(init);
+		dst.#anchored = this.#anchored;
 
 		const read = Atomics.load(this.#control, READ);
 		const write = Atomics.load(this.#control, WRITE);
diff --git a/js/watch/src/backend.ts b/js/watch/src/backend.ts
index 57f7e9eec0..29b46ca88d 100644
--- a/js/watch/src/backend.ts
+++ b/js/watch/src/backend.ts
@@ -36,18 +36,26 @@ export interface Backend {
 	// Audio specific signals.
 	audio?: Audio.Backend;
 
-	// The latency setting: "real-time" auto-computes jitter, a number sets a fixed jitter.
+	// The latency target: a scalar minimizes (collapsed range), an object opens a range. See {@link Latency}.
 	latency: Signal<Latency>;
 
 	// The jitter buffer in milliseconds.
 	jitter: Signal<Moq.Time.Milli>;
+
+	// Derived: whether buffered playback is active (ceiling above floor).
+	buffered: Signal<boolean>;
+
+	// Re-anchor playback (and flush the audio buffer) at an utterance boundary in buffered mode.
+	reset(): void;
 }
 
 export interface MultiBackendProps {
 	element?: HTMLCanvasElement | HTMLVideoElement | Signal<HTMLCanvasElement | HTMLVideoElement | undefined>;
 	broadcast?: Broadcast | Signal<Broadcast | undefined>;
 
-	// Latency: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter in ms.
+	// Latency target. A scalar (or "real-time") minimizes; an object `{ min, max }` opens a range and
+	// enables buffered playback: build up a buffer from future-dated frames (e.g. TTS) instead of
+	// minimizing latency. Call `reset()` at each utterance boundary to re-anchor. See {@link Latency}.
 	latency?: Latency | Signal<Latency>;
 
 	// Established connection, used by Sync to read RTT (PROBE) for dynamic jitter in "real-time" mode.
@@ -113,6 +121,7 @@ export class MultiBackend implements Backend {
 	broadcast: Signal<Broadcast | undefined>;
 	latency: Signal<Latency>;
 	jitter: Signal<Moq.Time.Milli>;
+	buffered: Signal<boolean>;
 	paused: Signal<boolean>;
 
 	// When video is downloaded relative to the canvas position. See {@link Video.Visible}.
@@ -124,6 +133,9 @@ export class MultiBackend implements Backend {
 	audio: AudioBackend;
 	#audioSource: Audio.Source;
 
+	// The active WebCodecs audio decoder, used to flush the buffer on `reset()`.
+	#audioDecoder?: Audio.Decoder;
+
 	// Used to sync audio and video playback at a target delay.
 	sync: Sync;
 
@@ -132,9 +144,13 @@ export class MultiBackend implements Backend {
 	constructor(props?: MultiBackendProps) {
 		this.element = Signal.from(props?.element);
 		this.broadcast = Signal.from(props?.broadcast);
-		this.sync = new Sync({ latency: props?.latency, connection: props?.connection });
+		this.sync = new Sync({
+			latency: props?.latency,
+			connection: props?.connection,
+		});
 		this.latency = this.sync.latency;
 		this.jitter = this.sync.jitter;
+		this.buffered = this.sync.buffered;
 
 		this.#videoSource = new Video.Source(this.sync, {
 			broadcast: this.broadcast,
@@ -166,6 +182,7 @@ export class MultiBackend implements Backend {
 	#runWebcodecs(effect: Effect, element: HTMLCanvasElement): void {
 		const videoSource = new Video.Decoder(this.#videoSource);
 		const audioSource = new Audio.Decoder(this.#audioSource);
+		this.#audioDecoder = audioSource;
 
 		const audioEmitter = new Audio.Emitter(audioSource, {
 			volume: this.audio.volume,
@@ -184,6 +201,7 @@ export class MultiBackend implements Backend {
 			audioSource.close();
 			audioEmitter.close();
 			videoRenderer.close();
+			this.#audioDecoder = undefined;
 		});
 
 		// Proxy the read only signals to the backend.
@@ -226,6 +244,13 @@ export class MultiBackend implements Backend {
 		effect.proxy(this.audio.context, audio.context);
 	}
 
+	// Re-anchor playback at an utterance boundary in buffered mode: reset the sync reference
+	// and flush the audio buffer so the next utterance plays from its own first frame.
+	reset(): void {
+		this.sync.reset();
+		this.#audioDecoder?.reset();
+	}
+
 	close(): void {
 		this.signals.close();
 		this.#videoSource.close();
diff --git a/js/watch/src/element.ts b/js/watch/src/element.ts
index 785f14791c..304fcfe6db 100644
--- a/js/watch/src/element.ts
+++ b/js/watch/src/element.ts
@@ -4,7 +4,7 @@ import * as Moq from "@moq/net";
 import { Effect, Signal } from "@moq/signals";
 import { MultiBackend } from "./backend";
 import { Broadcast, type CatalogFormat, parseCatalogFormat } from "./broadcast";
-import type { Latency } from "./sync";
+import { type Bound, type Latency, latencyBounds, latencyFromBounds } from "./sync";
 import type { Visible } from "./video";
 
 const OBSERVED = [
@@ -16,6 +16,8 @@ const OBSERVED = [
 	"visible",
 	"reload",
 	"latency",
+	"latency-min",
+	"latency-max",
 	"jitter",
 	"catalog-format",
 ] as const;
@@ -143,8 +145,12 @@ export default class MoqWatch extends HTMLElement {
 		});
 
 		this.signals.run((effect) => {
-			const latency = effect.get(this.backend.latency);
-			if (latency === "real-time") {
+			const { min, max } = latencyBounds(effect.get(this.backend.latency));
+			// Only reflect the collapsed `latency` sugar attribute when the range is actually
+			// collapsed. An open range is expressed via latency-min/latency-max, and writing
+			// `latency` here would round-trip back through attributeChangedCallback and collapse it.
+			if (min !== max) return;
+			if (min === "real-time") {
 				this.setAttribute("latency", "real-time");
 			} else {
 				const jitter = Math.floor(effect.get(this.backend.jitter));
@@ -191,9 +197,11 @@ export default class MoqWatch extends HTMLElement {
 		this.#enabled.set(false);
 	}
 
-	#setLatencyNumber(value: string | null) {
-		const parsed = value ? Number.parseFloat(value) : Number.NaN;
-		this.backend.latency.set((Number.isFinite(parsed) ? parsed : 100) as Time.Milli);
+	// Parse a single latency bound: absent or "real-time" is adaptive, otherwise a fixed ms value.
+	#parseBound(value: string | null): Bound {
+		if (!value || value === "real-time") return "real-time";
+		const parsed = Number.parseFloat(value);
+		return (Number.isFinite(parsed) ? parsed : 100) as Time.Milli;
 	}
 
 	attributeChangedCallback(name: Observed, oldValue: string | null, newValue: string | null) {
@@ -217,14 +225,15 @@ export default class MoqWatch extends HTMLElement {
 		} else if (name === "reload") {
 			this.broadcast.reload.set(newValue !== null);
 		} else if (name === "latency") {
-			if (!newValue || newValue === "real-time") {
-				this.backend.latency.set("real-time");
-			} else {
-				this.#setLatencyNumber(newValue);
-			}
+			// Sugar: collapse the floor and ceiling to a single value.
+			this.latency = this.#parseBound(newValue);
+		} else if (name === "latency-min") {
+			this.latencyMin = this.#parseBound(newValue);
+		} else if (name === "latency-max") {
+			this.latencyMax = this.#parseBound(newValue);
 		} else if (name === "jitter") {
 			// Deprecated: use latency="<number>" instead.
-			this.#setLatencyNumber(newValue);
+			this.latency = this.#parseBound(newValue);
 		} else if (name === "catalog-format") {
 			this.broadcast.catalogFormat.set(parseCatalogFormat(newValue));
 		} else {
@@ -290,6 +299,10 @@ export default class MoqWatch extends HTMLElement {
 		this.broadcast.reload.set(value);
 	}
 
+	/**
+	 * The latency target. Assign a scalar (or `"real-time"`) to minimize latency, or an object
+	 * `{ min, max }` to open a range and buffer future-dated frames. See {@link Latency}.
+	 */
 	get latency(): Latency {
 		return this.backend.latency.peek();
 	}
@@ -298,6 +311,31 @@ export default class MoqWatch extends HTMLElement {
 		this.backend.latency.set(value);
 	}
 
+	/** The latency floor (jitter/startup buffer). Read-modify-writes `latency`, leaving the ceiling. */
+	get latencyMin(): Bound {
+		return latencyBounds(this.backend.latency.peek()).min;
+	}
+
+	set latencyMin(value: Bound) {
+		const { max } = latencyBounds(this.backend.latency.peek());
+		this.backend.latency.set(latencyFromBounds(value, max));
+	}
+
+	/**
+	 * The latency ceiling: `"real-time"` (default) minimizes, a number caps at that many ms. A
+	 * ceiling above the floor enables buffered playback: build up a buffer from future-dated frames
+	 * (e.g. TTS written faster than real-time) and only skip ahead past the cap. Call `reset()` at
+	 * each utterance boundary. Read-modify-writes `latency`, leaving the floor untouched.
+	 */
+	get latencyMax(): Bound {
+		return latencyBounds(this.backend.latency.peek()).max;
+	}
+
+	set latencyMax(value: Bound) {
+		const { min } = latencyBounds(this.backend.latency.peek());
+		this.backend.latency.set(latencyFromBounds(min, value));
+	}
+
 	/** The jitter buffer in milliseconds. */
 	get jitter(): Time.Milli {
 		return this.backend.jitter.peek();
@@ -305,7 +343,12 @@ export default class MoqWatch extends HTMLElement {
 
 	/** @deprecated Use `latency = <number>` instead. */
 	set jitter(value: number) {
-		this.backend.latency.set(value as Time.Milli);
+		this.latency = value as Time.Milli;
+	}
+
+	/** Re-anchor playback and flush the audio buffer at an utterance boundary (buffered mode). */
+	reset(): void {
+		this.backend.reset();
 	}
 
 	get catalogFormat(): CatalogFormat | undefined {
diff --git a/js/watch/src/sync.test.ts b/js/watch/src/sync.test.ts
new file mode 100644
index 0000000000..db178f12fa
--- /dev/null
+++ b/js/watch/src/sync.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "bun:test";
+import type { Time } from "@moq/net";
+import { Sync } from "./sync";
+
+// Effects in @moq/signals flush on a microtask, so let pending updates drain before asserting.
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe("latency range", () => {
+	it("is collapsed by default", async () => {
+		const sync = new Sync();
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+		sync.close();
+	});
+
+	it("stays collapsed for a scalar latency", async () => {
+		const sync = new Sync({ latency: 100 as Time.Milli });
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+		expect(sync.maxBuffer.peek()).toBe(100 as Time.Milli);
+		sync.close();
+	});
+
+	it("enters buffered mode when the ceiling is above the floor", async () => {
+		const sync = new Sync({ latency: { max: 30_000 as Time.Milli } });
+		await flush();
+		expect(sync.buffered.peek()).toBe(true);
+		expect(sync.maxBuffer.peek()).toBe(30_000 as Time.Milli);
+		sync.close();
+	});
+
+	it("stays collapsed when the ceiling is at or below the floor", async () => {
+		// Fixed 200ms floor sits above the 100ms ceiling, so there's no room to buffer.
+		const sync = new Sync({ latency: { min: 200 as Time.Milli, max: 100 as Time.Milli } });
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+		sync.close();
+	});
+
+	it("reacts to a ceiling set after construction", async () => {
+		const sync = new Sync();
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+
+		sync.latency.set({ max: 30_000 as Time.Milli });
+		await flush();
+		expect(sync.buffered.peek()).toBe(true);
+		sync.close();
+	});
+
+	it("stays collapsed for an explicit real-time ceiling", async () => {
+		const sync = new Sync({ latency: { max: "real-time" } });
+		await flush();
+		expect(sync.buffered.peek()).toBe(false);
+		sync.close();
+	});
+});
diff --git a/js/watch/src/sync.ts b/js/watch/src/sync.ts
index 505a9967f4..f21940d11e 100644
--- a/js/watch/src/sync.ts
+++ b/js/watch/src/sync.ts
@@ -2,14 +2,39 @@ import type * as Moq from "@moq/net";
 import { Time } from "@moq/net";
 import { Effect, Signal } from "@moq/signals";
 
-/** Latency: `"real-time"` auto-computes jitter from RTT; a `Time.Milli` sets a fixed jitter. */
-export type Latency = "real-time" | Time.Milli;
+/** A single latency bound: `"real-time"` adapts to the RTT; a `Time.Milli` fixes the jitter buffer. */
+export type Bound = "real-time" | Time.Milli;
+
+/**
+ * Latency target. A scalar (or `"real-time"`) collapses the range and minimizes latency, the live
+ * default. An object opens a range `[min, max]`: playback buffers freely between the floor and the
+ * ceiling and only skips ahead once latency would exceed the ceiling, so faster-than-real-time
+ * frames (e.g. a TTS response with future timestamps) build up instead of being skipped. Both
+ * bounds default to `"real-time"` when omitted. The ceiling is always finite (no uncapped buffering),
+ * so worst case the audio ring drops its oldest samples rather than exhausting memory.
+ */
+export type Latency = Bound | { min?: Bound; max?: Bound };
+
+/** Resolve a {@link Latency} into explicit floor/ceiling bounds (a scalar collapses to `min == max`). */
+export function latencyBounds(latency: Latency): { min: Bound; max: Bound } {
+	if (latency === "real-time" || typeof latency === "number") {
+		return { min: latency, max: latency };
+	}
+	return { min: latency.min ?? "real-time", max: latency.max ?? "real-time" };
+}
+
+/** Build a {@link Latency} from explicit bounds, collapsing to a scalar when they're equal. */
+export function latencyFromBounds(min: Bound, max: Bound): Latency {
+	return min === max ? min : { min, max };
+}
 
 const MIN_JITTER = 20 as Time.Milli;
 const FALLBACK_JITTER = 100 as Time.Milli;
 
 export interface SyncProps {
+	// Latency target: a scalar minimizes (collapsed range), an object opens a range. See {@link Latency}.
 	latency?: Latency | Signal<Latency>;
+
 	connection?: Signal<Moq.Connection.Established | undefined>;
 	audio?: Time.Milli | Signal<Time.Milli | undefined>;
 	video?: Time.Milli | Signal<Time.Milli | undefined>;
@@ -21,18 +46,28 @@ export class Sync {
 	#reference = new Signal<Time.Milli | undefined>(undefined);
 	readonly reference: Signal<Time.Milli | undefined> = this.#reference;
 
-	// The latency setting: "real-time" auto-computes jitter from RTT, a number sets a fixed jitter.
+	// The latency target: a scalar minimizes (collapsed range), an object opens a range. See {@link Latency}.
 	latency: Signal<Latency>;
 
 	// The jitter buffer in milliseconds (always numeric).
 	// In "real-time" mode this is updated automatically from RTT.
-	// When latency is a number, jitter equals that number.
+	// When the floor is a number, jitter equals that number.
 	jitter: Signal<Time.Milli>;
 
 	// Any additional delay required for audio or video.
 	audio: Signal<Time.Milli | undefined>;
 	video: Signal<Time.Milli | undefined>;
 
+	// Derived: true when the ceiling sits above the floor. Buffered playback lets the reference
+	// stay anchored so future-dated frames build up a buffer, re-anchoring (skipping ahead) only
+	// when latency would exceed the ceiling. See `reset()`.
+	#buffered = new Signal<boolean>(false);
+	readonly buffered: Signal<boolean> = this.#buffered;
+
+	// Derived cap on buffered audio (ms), consumed by the audio ring to size itself. Always finite.
+	#maxBuffer = new Signal<Time.Milli>(Time.Milli.zero);
+	readonly maxBuffer: Signal<Time.Milli> = this.#maxBuffer;
+
 	// The total buffer required: jitter + max(audio, video).
 	#buffer = new Signal<Time.Milli>(Time.Milli.zero);
 	readonly buffer: Signal<Time.Milli> = this.#buffer;
@@ -67,15 +102,41 @@ export class Sync {
 
 		this.signals.run(this.#runJitter.bind(this));
 		this.signals.run(this.#runBuffer.bind(this));
+		this.signals.run(this.#runRange.bind(this));
+	}
+
+	// Derive `buffered` / `maxBuffer` from the floor (`buffer`) and the ceiling (the `max` bound).
+	#runRange(effect: Effect): void {
+		const { max } = latencyBounds(effect.get(this.latency));
+		const floor = effect.get(this.buffer);
+
+		if (max === "real-time") {
+			// Ceiling tracks the floor: minimize latency, the live default.
+			this.#buffered.set(false);
+			this.#maxBuffer.set(floor);
+		} else {
+			// Buffered only when the ceiling is above the floor; otherwise it collapses to minimize.
+			this.#buffered.set(max > floor);
+			this.#maxBuffer.set(Time.Milli.max(max, floor));
+		}
+	}
+
+	// The maximum total latency (lookahead + floor) we tolerate before re-anchoring, in ms.
+	// Used by `received()` to decide when to skip ahead.
+	#latencyCap(): Time.Milli {
+		const { max } = latencyBounds(this.latency.peek());
+		const floor = this.#buffer.peek();
+		if (max === "real-time") return floor;
+		return Time.Milli.max(max, floor);
 	}
 
 	#runJitter(effect: Effect): void {
-		const latency = effect.get(this.latency);
+		const { min } = latencyBounds(effect.get(this.latency));
 
-		if (typeof latency === "number") {
-			// Fixed mode: latency value is the jitter.
+		if (typeof min === "number") {
+			// Fixed mode: the floor value is the jitter.
 			this.#minRtt = undefined;
-			this.jitter.set(latency);
+			this.jitter.set(min);
 			return;
 		}
 
@@ -110,47 +171,70 @@ export class Sync {
 		this.#update = Promise.withResolvers();
 	}
 
-	// Update the reference if this is the earliest frame we've seen, relative to its timestamp.
+	// Fold a newly received frame into the reference. The reference anchors playback to the
+	// wall clock; we lower it (skip ahead) only when keeping it would push latency past the cap.
 	received(timestamp: Time.Milli, label = ""): void {
 		this.timestamp.update((current) => (current === undefined || timestamp > current ? timestamp : current));
 		const now = Time.Milli.now();
 		const ref = Time.Milli.sub(now, timestamp);
 		const currentRef = this.#reference.peek();
 
-		if (currentRef !== undefined) {
-			// Check if `wait()` would not sleep at all.
-			// NOTE: We check here instead of in `wait()` so we can identify when frames are received late.
-			// Otherwise, chained `wait()` calls would cause a false-positive during CPU starvation.
-			const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), this.#buffer.peek());
-			if (sleep < 0) {
-				const entry = this.#late.get(label);
-				if (entry) {
-					entry.count++;
-					entry.maxMs = Math.max(entry.maxMs, -sleep);
-				} else {
-					this.#late.set(label, { count: 1, maxMs: -sleep });
-				}
+		// First frame anchors the reference.
+		if (currentRef === undefined) {
+			this.#setReference(ref);
+			return;
+		}
+
+		// Check if `wait()` would not sleep at all.
+		// NOTE: We check here instead of in `wait()` so we can identify when frames are received late.
+		// Otherwise, chained `wait()` calls would cause a false-positive during CPU starvation.
+		const floor = this.#buffer.peek();
+		const sleep = Time.Milli.add(Time.Milli.sub(currentRef, ref), floor);
+		if (sleep < 0) {
+			const entry = this.#late.get(label);
+			if (entry) {
+				entry.count++;
+				entry.maxMs = Math.max(entry.maxMs, -sleep);
 			} else {
-				const entry = this.#late.get(label);
-				if (entry) {
-					const prefix = label ? `sync[${label}]` : "sync";
-					const behind = Sync.#formatDuration(entry.maxMs);
-					console.debug(`${prefix}: ${entry.count} late frame(s), max ${behind} behind`);
-					this.#late.delete(label);
-				}
+				this.#late.set(label, { count: 1, maxMs: -sleep });
 			}
-
-			if (ref >= currentRef) {
-				// Our frame was not relatively newer than any other frame.
-				return;
+		} else {
+			const entry = this.#late.get(label);
+			if (entry) {
+				const prefix = label ? `sync[${label}]` : "sync";
+				const behind = Sync.#formatDuration(entry.maxMs);
+				console.debug(`${prefix}: ${entry.count} late frame(s), max ${behind} behind`);
+				this.#late.delete(label);
 			}
 		}
 
+		// Frame isn't earlier than the anchor: it can't lower latency, so keep the reference.
+		if (ref >= currentRef) return;
+
+		// Frame is earlier (more lookahead). `sleep` is the latency keeping the anchor would impose.
+		const cap = this.#latencyCap();
+		if (sleep <= cap) return; // within budget: let the buffer grow instead of skipping ahead
+
+		// Over the cap: re-anchor down so the resulting latency is exactly the cap.
+		this.#setReference(Time.Milli.add(ref, (cap - floor) as Time.Milli));
+	}
+
+	#setReference(ref: Time.Milli): void {
 		this.#reference.set(ref);
 		this.#update.resolve();
 		this.#update = Promise.withResolvers();
 	}
 
+	// Re-anchor playback to the next frame received. Call this at an utterance boundary
+	// in buffered mode (typically alongside flushing the audio buffer) so the new content
+	// plays from its own first frame instead of inheriting the previous reference.
+	reset(): void {
+		this.#reference.set(undefined);
+		this.#late.clear();
+		this.#update.resolve();
+		this.#update = Promise.withResolvers();
+	}
+
 	// The PTS that should be rendering right now, derived from the reference + buffer.
 	// Returns undefined if no frames have been received yet.
 	now(): Time.Milli | undefined {
diff --git a/js/watch/src/ui/components/buffer-control.ts b/js/watch/src/ui/components/buffer-control.ts
index b5d6f159f9..4be298d830 100644
--- a/js/watch/src/ui/components/buffer-control.ts
+++ b/js/watch/src/ui/components/buffer-control.ts
@@ -141,7 +141,7 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 		const ms = (x / trackWidth) * max;
 		const snapped = (Math.round(ms / RANGE_STEP) * RANGE_STEP) as Moq.Time.Milli;
 		const clamped = Math.max(MIN_RANGE, Math.min(max, snapped)) as Moq.Time.Milli;
-		watch.backend.latency.set(clamped);
+		watch.latencyMin = clamped;
 	};
 
 	const interact = () => {
@@ -181,7 +181,7 @@ export function bufferControl(parent: Effect, watch: MoqWatch, max: Moq.Time.Mil
 		interact();
 		const current = watch.backend.jitter.peek();
 		const value = Math.max(MIN_RANGE, Math.min(max, current + delta)) as Moq.Time.Milli;
-		watch.backend.latency.set(value);
+		watch.latencyMin = value;
 	});
 
 	const draw = () => {
diff --git a/js/watch/src/ui/components/latency.ts b/js/watch/src/ui/components/latency.ts
index d09bba3fdd..d5955d973c 100644
--- a/js/watch/src/ui/components/latency.ts
+++ b/js/watch/src/ui/components/latency.ts
@@ -2,6 +2,7 @@ import type { Moq } from "@moq/hang";
 import type { Effect } from "@moq/signals";
 import * as DOM from "@moq/signals/dom";
 import type MoqWatch from "../../element";
+import { latencyBounds } from "../../sync";
 import { formatMillis } from "../format";
 import { bufferControl } from "./buffer-control";
 
@@ -25,14 +26,14 @@ export function latencyTab(parent: Effect, watch: MoqWatch): HTMLElement {
 	const buttons = PRESETS.map((preset) => {
 		const chip = DOM.create("button", { className: "chip", type: "button" }, preset.label);
 		parent.event(chip, "click", () => {
-			watch.backend.latency.set(preset.value === "real-time" ? "real-time" : (preset.value as Moq.Time.Milli));
+			watch.latencyMin = preset.value === "real-time" ? "real-time" : (preset.value as Moq.Time.Milli);
 		});
 		chips.appendChild(chip);
 		return { preset, chip };
 	});
 
 	parent.run((effect) => {
-		const mode = effect.get(watch.backend.latency);
+		const mode = latencyBounds(effect.get(watch.backend.latency)).min;
 		for (const { preset, chip } of buttons) {
 			const active = preset.value === "real-time" ? mode === "real-time" : mode === preset.value;
 			chip.classList.toggle("chip--active", active);
@@ -53,7 +54,7 @@ export function latencyTab(parent: Effect, watch: MoqWatch): HTMLElement {
 	readout.append(jitterStat, bufferStat);
 
 	parent.run((effect) => {
-		const mode = effect.get(watch.backend.latency);
+		const mode = latencyBounds(effect.get(watch.backend.latency)).min;
 		const jitter = effect.get(watch.backend.jitter);
 		const total = effect.get(watch.backend.sync.buffer);
 		jitterVal.textContent = `${formatMillis(jitter)}${mode === "real-time" ? " (auto)" : ""}`;