avbridge 2.12.1 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "avbridge",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "description": "Play and convert arbitrary video files in the browser. Native, remux, hybrid, fallback, and transcode — one API.",
   "license": "MIT",
   "author": "Keishi Hattori",

package/src/element/avbridge-player.ts

@@ -72,6 +72,44 @@ type FitMode = (typeof FIT_MODES)[number];
 export class AvbridgePlayerElement extends HTMLElement {
   static readonly observedAttributes = [...PROXY_ATTRIBUTES, ...PLAYER_ATTRIBUTES];
 
+  /**
+   * Returns `true` if a DOM event originated from one of the player's
+   * **interactive chrome elements** (seek bar, control buttons, settings
+   * menu, overlay play button) rather than the bare video surface.
+   *
+   * This is the escape hatch for host pages that wrap the player in a
+   * gesture recognizer (e.g. TikTok-style vertical-swipe pager). For
+   * bubble-phase listeners the player's own handlers already call
+   * `stopPropagation()` on chrome interactions — but **capture-phase**
+   * listeners run *before* the player's handlers, so they need to check
+   * the event's path themselves and bail. This helper does that check
+   * via `composedPath()`, which traverses shadow boundaries correctly.
+   *
+   * Returns `false` for events on the bare video surface — host pages
+   * remain free to claim those for their own gestures (e.g. swipe-to-pan
+   * to the next video). Returns `false` for events that never hit a
+   * player at all.
+   *
+   * @example
+   * // TikTok-style vertical swipe on the document, capture phase:
+   * document.addEventListener("pointerdown", (e) => {
+   *   if (AvbridgePlayerElement.isPlayerChromeEvent(e)) return;
+   *   startSwipeGesture(e);
+   * }, { capture: true });
+   */
+  static isPlayerChromeEvent(event: Event): boolean {
+    // Mirrors the selector used by the player's internal tap-target
+    // gate (see `_onPlayerSurfaceClick` and friends): anything inside
+    // these regions is "chrome", everything else is the bare video.
+    const CHROME_SELECTOR = ".avp-controls, .avp-settings, .avp-overlay-btn";
+    for (const node of event.composedPath()) {
+      if (node instanceof HTMLElement && node.matches?.(CHROME_SELECTOR)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   // ── Internal DOM refs ──────────────────────────────────────────────────
 
   private _video!: AvbridgeVideoElement;
@@ -104,6 +142,11 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _activeAudioTrackId: number | null = null;
   private _activeSubtitleTrackId: number | null = null;
   private _userSeeking = false;
+  /** Last seek target the user committed. The thumb stays here (and
+   *  `_updateTime` skips updating from `timeupdate`) until the underlying
+   *  `currentTime` actually catches up — otherwise the thumb visibly snaps
+   *  back to the pre-seek position while the remux pipeline rebuilds. */
+  private _pendingSeekTarget: number | null = null;
   private _holdTimer: ReturnType<typeof setTimeout> | null = null;
   private _holdSpeedActive = false;
   private _savedPlaybackRate = 1;
@@ -233,7 +276,10 @@ export class AvbridgePlayerElement extends HTMLElement {
     }
 
     // State tracking
-    on(this._video, "loadstart", () => this._setState("loading"));
+    on(this._video, "loadstart", () => {
+      this._pendingSeekTarget = null;
+      this._setState("loading");
+    });
     on(this._video, "ready", () => {
       this._setState(this._video.paused ? "paused" : "playing");
       this._seekInput.max = String(this._video.duration || 0);
@@ -430,7 +476,9 @@ export class AvbridgePlayerElement extends HTMLElement {
   }
 
   private _onSeekCommit(): void {
-    this._video.currentTime = Number(this._seekInput.value);
+    const target = Number(this._seekInput.value);
+    this._pendingSeekTarget = target;
+    this._video.currentTime = target;
     this._userSeeking = false;
   }
 
@@ -442,49 +490,87 @@ export class AvbridgePlayerElement extends HTMLElement {
     return frac * (this._video.duration || 0);
   }
 
-  /** Seekbar width below which drag-to-scrub seeks in real-time (vs
-   *  preview-only). On narrow bars precise positioning is hard, so
-   *  immediate video feedback is more useful than a time tooltip. */
-  private static readonly SCRUB_WIDTH_THRESHOLD = 400;
-
   private _onSeekPointerDown(e: PointerEvent): void {
     // Ignore synthetic clicks originating from the input's own handling
     if (e.button !== 0 && e.pointerType === "mouse") return;
     e.preventDefault();
+    // Consume the event so host pages can layer the player inside a
+    // swipe-driven UI (e.g. TikTok-style vertical pager) without the
+    // pointerdown bubbling out and latching their gesture recognizer.
+    // The seekbar's CSS sets `touch-action: none` to suppress native
+    // browser pan/zoom — this complements that on the JS side, since
+    // swipe handlers built on PointerEvents wouldn't honor touch-action.
+    e.stopPropagation();
     this._userSeeking = true;
     const seekBar = this.shadowRoot!.querySelector(".avp-seek") as HTMLElement;
     seekBar.setPointerCapture(e.pointerId);
     seekBar.setAttribute("data-seeking", "");
 
-    // Decide scrub mode based on physical width.
-    const scrubMode = seekBar.getBoundingClientRect().width < AvbridgePlayerElement.SCRUB_WIDTH_THRESHOLD;
-    let lastScrubCommit = 0;
+    // Two seek modes, picked by `(pointer: coarse)`:
+    //   - **fine** (mouse / trackpad / stylus): absolute mapping —
+    //     pointer X maps directly to seek time, thumb jumps under
+    //     cursor. Standard desktop YouTube behavior.
+    //   - **coarse** (touch): relative drag — initial tap doesn't move
+    //     the thumb; finger Δx maps to a Δt added to the time at
+    //     pointerdown. Standard YouTube-mobile behavior; matters because
+    //     finger positioning is too imprecise for absolute on a small bar.
+    // Both modes commit live during drag (throttled to ~4 Hz so we don't
+    // overwhelm the seek pipeline — every commit restarts the decoder
+    // pump on canvas strategies) and once more on pointerup.
+    const coarse = typeof matchMedia !== "undefined"
+      && matchMedia("(pointer: coarse)").matches;
+    const startTime = coarse ? (this._video.currentTime || 0) : 0;
+    const startClientX = e.clientX;
+    let lastCommit = 0;
+
+    const timeAt = (clientX: number): number => {
+      if (coarse) {
+        const rect = seekBar.getBoundingClientRect();
+        const dx = clientX - startClientX;
+        const dt = (dx / rect.width) * (this._video.duration || 0);
+        return Math.max(0, Math.min(this._video.duration || 0, startTime + dt));
+      }
+      return this._timeFromSeekPointer(clientX);
+    };
 
-    const initial = this._timeFromSeekPointer(e.clientX);
-    this._seekInput.value = String(initial);
-    this._onSeekInput();
-    this._updateSeekTooltip(e.clientX);
-    if (scrubMode) this._onSeekCommit();
+    const showTooltip = (t: number, clientX: number): void => {
+      if (coarse) this._updateSeekTooltipAtTime(t);
+      else this._updateSeekTooltip(clientX);
+    };
+
+    // Fine mode: tap commits immediately (thumb jumps under pointer).
+    // Coarse mode: tap parks at the current time; only drag moves it.
+    if (!coarse) {
+      const initial = timeAt(e.clientX);
+      this._seekInput.value = String(initial);
+      this._onSeekInput();
+      showTooltip(initial, e.clientX);
+      this._onSeekCommit();
+      this._userSeeking = true; // commit clears it; we're still seeking
+    } else {
+      showTooltip(startTime, e.clientX);
+    }
 
     const onMove = (ev: PointerEvent) => {
-      const t = this._timeFromSeekPointer(ev.clientX);
+      // Belt-and-suspenders for the host's swipe handler. Pointer capture
+      // changes the *target* of subsequent pointermove events to seekBar,
+      // but they still bubble through ancestors — a swipe listener
+      // attached to document/window would otherwise see every drag tick.
+      ev.stopPropagation();
+      const t = timeAt(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
-      this._updateSeekTooltip(ev.clientX);
-      // In scrub mode, commit seeks throttled to ~4 Hz so we don't
-      // overwhelm the seek pipeline (especially on canvas strategies
-      // where each seek restarts the decoder pump).
-      if (scrubMode) {
-        const now = performance.now();
-        if (now - lastScrubCommit > 250) {
-          lastScrubCommit = now;
-          this._onSeekCommit();
-          this._userSeeking = true; // keep seeking flag live
-        }
+      showTooltip(t, ev.clientX);
+      const now = performance.now();
+      if (now - lastCommit > 250) {
+        lastCommit = now;
+        this._onSeekCommit();
+        this._userSeeking = true;
       }
     };
     const onUp = (ev: PointerEvent) => {
-      const t = this._timeFromSeekPointer(ev.clientX);
+      ev.stopPropagation();
+      const t = timeAt(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekCommit();
       this._seekInput.focus();
@@ -511,6 +597,16 @@ export class AvbridgePlayerElement extends HTMLElement {
     this._seekTooltip.style.left = `${frac * 100}%`;
   }
 
+  /** Position the tooltip over a specific time (vs. pointer X). Used by
+   *  relative-drag scrub on coarse pointers, where the displayed time
+   *  is decoupled from the finger position. */
+  private _updateSeekTooltipAtTime(t: number): void {
+    const dur = this._video.duration || 0;
+    const frac = dur > 0 ? Math.max(0, Math.min(1, t / dur)) : 0;
+    this._seekTooltip.textContent = formatTime(t);
+    this._seekTooltip.style.left = `${frac * 100}%`;
+  }
+
   private _updateSeekVisuals(t: number): void {
     const dur = this._video.duration || 0;
     const pct = dur > 0 ? (t / dur) * 100 : 0;
@@ -526,6 +622,18 @@ export class AvbridgePlayerElement extends HTMLElement {
     if (this._userSeeking) return;
     const t = this._video.currentTime;
     const d = this._video.duration;
+    // While a committed seek is still settling, keep the thumb at the
+    // target so it doesn't snap back to the pre-seek position. Clear once
+    // currentTime has landed within 0.5s of the target.
+    if (this._pendingSeekTarget !== null) {
+      if (Math.abs(t - this._pendingSeekTarget) < 0.5) {
+        this._pendingSeekTarget = null;
+      } else {
+        this._timeDisplay.textContent = `${formatTime(this._pendingSeekTarget)} / ${formatTime(d)}`;
+        this._updateBuffered();
+        return;
+      }
+    }
     this._seekInput.value = String(t);
     this._updateSeekVisuals(t);
     this._timeDisplay.textContent = `${formatTime(t)} / ${formatTime(d)}`;

package/src/strategies/fallback/audio-output.ts

@@ -35,6 +35,17 @@ interface PendingChunk {
   sampleRate: number;
   frameCount: number;
   durationSec: number;
+  /** Source-domain content PTS in seconds. `null` for legacy callers
+   *  that schedule sequentially without PTS information. */
+  ptsSec: number | null;
+}
+
+/** True when `globalThis.AVBRIDGE_DEBUG` is set. Used to gate [TRACE-AUD]
+ *  per-chunk logs that are useful for diagnosing scheduling drift but
+ *  unreadable in normal use. */
+function isDebug(): boolean {
+  return typeof globalThis !== "undefined"
+    && !!(globalThis as Record<string, unknown>).AVBRIDGE_DEBUG;
 }
 
 export interface ClockSource {
@@ -42,6 +53,14 @@ export interface ClockSource {
   now(): number;
   /** True if media is currently playing (audio scheduler is running). */
   isPlaying(): boolean;
+  /**
+   * Media time at which the current playback session was anchored — i.e. the
+   * seek target after the most recent `reset()`, or 0 on cold start. Used by
+   * the video renderer for post-flush PTS calibration: `now()` includes any
+   * decode-stall lag accumulated since playback resumed, but the anchor is
+   * a stable reference that maps directly to the user's intended position.
+   */
+  anchorTime(): number;
 }
 
 export class AudioOutput implements ClockSource {
@@ -69,6 +88,17 @@ export class AudioOutput implements ClockSource {
 
   /** Anchor: media time `mediaTimeOfAnchor` corresponds to ctx time `ctxTimeAtAnchor`. */
   private mediaTimeOfAnchor = 0;
+
+  /**
+   * Ctx time at which the first audible chunk will start playing. `-1`
+   * before any chunk has been scheduled successfully (clock is frozen);
+   * the actual ctx time once one has. The renderer's `clock.now()` uses
+   * this to avoid advancing during the silent-gap window between
+   * `audio.start()` and the first chunk that schedules without being
+   * dropped — that gap is what produces the "audio-less fast-forward"
+   * the user sees post-seek when the gate releases on video-only grace.
+   */
+  private firstAudibleCtxStart = -1;
   private ctxTimeAtAnchor = 0;
 
   private pendingQueue: PendingChunk[] = [];
@@ -154,11 +184,30 @@ export class AudioOutput implements ClockSource {
       return this.mediaTimeOfAnchor;
     }
     if (this.state === "playing") {
+      // Freeze the clock until the first audio chunk has actually been
+      // scheduled. Without this, when `audio.start()` fires before any
+      // post-seek audio packets have made it through the decoder (e.g. the
+      // gate's "video-only grace" path released early), `clock.now()`
+      // would advance from `mediaTimeOfAnchor` at 1× wall time while the
+      // audio scheduler is dropping every chunk that arrives (their
+      // PTS-derived `ctxStart` is already in the past). The renderer would
+      // paint frames during that silent window — the user perceives that
+      // as a "fast-forward burst with no audio." When the first chunk
+      // finally arrives and schedules normally, `firstAudibleCtxStart` is
+      // set and the clock unfreezes from there in sync with the audible
+      // content's PTS.
+      if (this.firstAudibleCtxStart < 0) {
+        return this.mediaTimeOfAnchor;
+      }
       return this.mediaTimeOfAnchor + (this.ctx.currentTime - this.ctxTimeAtAnchor) * this._rate;
     }
     return this.mediaTimeOfAnchor;
   }
 
+  anchorTime(): number {
+    return this.mediaTimeOfAnchor;
+  }
+
   isPlaying(): boolean {
     return this.state === "playing";
   }
@@ -192,18 +241,55 @@ export class AudioOutput implements ClockSource {
    * Schedule a chunk of decoded samples. Queues internally while idle (cold
    * start or post-seek), schedules directly to the audio graph while playing.
    * In wall-clock mode, samples are silently discarded.
+   *
+   * `ptsSec` is the chunk's source-domain content PTS in seconds, from
+   * the demuxer. When provided, the chunk plays at the ctx-time
+   * corresponding to that PTS — so pre-target audio after a seek
+   * naturally drops (its computed `ctxStart` falls in the past) and
+   * post-target audio plays at its true content time, without any
+   * external trim or anchor rebase. When `ptsSec` is null (cold start
+   * with no PTS yet, or codecs whose packet→frame mapping isn't 1:1),
+   * the chunk is scheduled sequentially after `mediaTimeOfNext` — the
+   * pre-refactor behavior.
    */
-  schedule(samples: Float32Array, channels: number, sampleRate: number): void {
+  schedule(
+    samples: Float32Array,
+    channels: number,
+    sampleRate: number,
+    ptsSec?: number | null,
+  ): void {
     if (this.destroyed || this.noAudio) return;
     const frameCount = samples.length / channels;
     const durationSec = frameCount / sampleRate;
+    const hasPts = ptsSec != null && Number.isFinite(ptsSec);
+
+    // Pre-target gate: a chunk whose entire PTS span is before the
+    // current media anchor will be silently dropped by `scheduleNow`
+    // (its `ctxStart` falls in the past). We must apply the same drop
+    // here in idle/paused state too — otherwise the chunk sits in
+    // `pendingQueue`, `bufferAhead()` reports it as buffered audio,
+    // `waitForBuffer()`'s gate releases on a phantom audio buffer, and
+    // `audio.start()` fires with a queue full of chunks that immediately
+    // drop on drain. The user sees post-seek "sped up no audio" while
+    // the demuxer slowly chews through pre-target packets — `clock.now()`
+    // is advancing on wall time and the renderer paints video against
+    // it, but `node.start()` is never being called.
+    if (hasPts && (ptsSec as number) + durationSec / this._rate < this.mediaTimeOfAnchor) {
+      return;
+    }
 
     if (this.state === "idle" || this.state === "paused") {
-      this.pendingQueue.push({ samples, channels, sampleRate, frameCount, durationSec });
+      this.pendingQueue.push({
+        samples, channels, sampleRate, frameCount, durationSec,
+        ptsSec: hasPts ? (ptsSec as number) : null,
+      });
       return;
     }
 
-    this.scheduleNow(samples, channels, sampleRate, frameCount);
+    this.scheduleNow(
+      samples, channels, sampleRate, frameCount,
+      hasPts ? (ptsSec as number) : null,
+    );
   }
 
   private scheduleNow(
@@ -211,7 +297,67 @@ export class AudioOutput implements ClockSource {
     channels: number,
     sampleRate: number,
     frameCount: number,
+    ptsSec: number | null,
   ): void {
+    const durationSec = frameCount / sampleRate;
+
+    // Compute ctxStart. Two paths:
+    //
+    //   PTS-known: the chunk's content PTS maps to a specific ctx time
+    //   via (mediaTimeOfAnchor, ctxTimeAtAnchor). If that ctx time is
+    //   already in the past, the chunk represents audio the user should
+    //   have heard before now — drop it. After a seek, this is what
+    //   *automatically* skips pre-target audio packets returned by a
+    //   keyframe-aligned demuxer seek; no manual trim needed.
+    //
+    //   PTS-unknown (legacy): chain after the last-scheduled sample
+    //   via `mediaTimeOfNext`. Same behavior as before the refactor.
+    let ctxStart: number;
+    if (ptsSec != null) {
+      ctxStart = this.ctxTimeAtAnchor + (ptsSec - this.mediaTimeOfAnchor) / this._rate;
+      if (isDebug()) {
+        // eslint-disable-next-line no-console
+        console.log(`[TRACE-AUD] PTS sched #${this.framesScheduled} pts=${ptsSec.toFixed(3)} dur=${durationSec.toFixed(4)} ctxStart=${ctxStart.toFixed(4)} ctxNow=${this.ctx.currentTime.toFixed(4)} anchor=${this.mediaTimeOfAnchor.toFixed(3)} ctxAnchor=${this.ctxTimeAtAnchor.toFixed(4)} mtNext=${this.mediaTimeOfNext.toFixed(3)} rate=${this._rate}`);
+      }
+      if (ctxStart < this.ctx.currentTime - 0.001) {
+        if (isDebug()) {
+          // eslint-disable-next-line no-console
+          console.log(`[TRACE-AUD] DROP late chunk pts=${ptsSec.toFixed(3)} ctxStart=${ctxStart.toFixed(4)} < ctxNow=${this.ctx.currentTime.toFixed(4)}`);
+        }
+        return;
+      }
+      // First chunk to schedule successfully unfreezes `clock.now()`.
+      // We rebase the anchor onto this chunk: when ctx reaches `ctxStart`,
+      // clock should equal `ptsSec` (so `audioNow` matches audible content
+      // PTS exactly when the chunk plays). The renderer's deadline will
+      // then advance from there, in lockstep with what's audible.
+      if (this.firstAudibleCtxStart < 0) {
+        this.firstAudibleCtxStart = ctxStart;
+        this.mediaTimeOfAnchor = ptsSec;
+        this.ctxTimeAtAnchor = ctxStart;
+        if (isDebug()) {
+          // eslint-disable-next-line no-console
+          console.log(`[TRACE-AUD] UNFREEZE clock — first audible chunk pts=${ptsSec.toFixed(3)} ctxStart=${ctxStart.toFixed(4)} → anchor=${this.mediaTimeOfAnchor.toFixed(3)} ctxAnchor=${this.ctxTimeAtAnchor.toFixed(4)}`);
+        }
+      }
+      const endMediaTime = ptsSec + durationSec / this._rate;
+      if (endMediaTime > this.mediaTimeOfNext) {
+        this.mediaTimeOfNext = endMediaTime;
+      }
+    } else {
+      ctxStart = this.ctxTimeAtAnchor + (this.mediaTimeOfNext - this.mediaTimeOfAnchor) / this._rate;
+      // eslint-disable-next-line no-console
+      console.warn(`[TRACE-AUD] LEGACY (no PTS) sched dur=${durationSec.toFixed(4)} ctxStart=${ctxStart.toFixed(4)} ctxNow=${this.ctx.currentTime.toFixed(4)}`);
+      if (ctxStart < this.ctx.currentTime) {
+        // eslint-disable-next-line no-console
+        console.warn(`[TRACE-AUD] REBASE anchor was=${this.mediaTimeOfAnchor.toFixed(3)} ctxAnchor was=${this.ctxTimeAtAnchor.toFixed(4)} → anchor=${this.mediaTimeOfNext.toFixed(3)} ctxAnchor=${this.ctx.currentTime.toFixed(4)}`);
+        this.ctxTimeAtAnchor = this.ctx.currentTime;
+        this.mediaTimeOfAnchor = this.mediaTimeOfNext;
+        ctxStart = this.ctx.currentTime;
+      }
+      this.mediaTimeOfNext += durationSec;
+    }
+
     const buffer = this.ctx.createBuffer(channels, frameCount, sampleRate);
     for (let ch = 0; ch < channels; ch++) {
       const channelData = buffer.getChannelData(ch);
@@ -222,38 +368,8 @@ export class AudioOutput implements ClockSource {
     const node = this.ctx.createBufferSource();
     node.buffer = buffer;
     node.connect(this.gain);
-    // Pitch the audio to match the playback rate (same as native <video>).
     if (this._rate !== 1) node.playbackRate.value = this._rate;
-
-    // Convert media time → ctx time using the anchor + rate. At rate=2,
-    // each second of media time occupies 0.5s of ctx time.
-    let ctxStart = this.ctxTimeAtAnchor + (this.mediaTimeOfNext - this.mediaTimeOfAnchor) / this._rate;
-
-    // When the decoder is slower than realtime, `ctxStart` falls into
-    // the past (ctx.currentTime has already passed it). Clamping each
-    // sample to `ctx.currentTime` individually (the old behavior)
-    // caused every stale sample in a burst to start at *the same
-    // instant*, stacking them on top of each other — the audible
-    // symptom was a series of clicks / a chord of stuttering cook
-    // packets.
-    //
-    // Correct behavior: when the first sample of a burst is behind,
-    // *rebase the anchor forward* so ctxStart = ctx.currentTime now.
-    // Subsequent samples in the same burst then schedule at
-    // ctxStart + offset as usual, laying out sequentially on the
-    // timeline instead of piling up. The downside is a visible jump
-    // in the audio clock — but the alternative was silent corruption.
-    // `now()` readers (the video renderer) just see the clock step
-    // forward and drop any frames older than the new time.
-    if (ctxStart < this.ctx.currentTime) {
-      this.ctxTimeAtAnchor = this.ctx.currentTime;
-      this.mediaTimeOfAnchor = this.mediaTimeOfNext;
-      ctxStart = this.ctx.currentTime;
-    }
-
     node.start(ctxStart);
-
-    this.mediaTimeOfNext += frameCount / sampleRate;
     this.framesScheduled++;
   }
 
@@ -286,6 +402,10 @@ export class AudioOutput implements ClockSource {
     try { this.gain.connect(this.ctx.destination); } catch { /* ignore */ }
 
     if (this.state === "paused") {
+      if (isDebug()) {
+        // eslint-disable-next-line no-console
+        console.log(`[TRACE-AUD] START(resume) anchor=${this.mediaTimeOfAnchor.toFixed(3)} ctxAnchor=${this.ctxTimeAtAnchor.toFixed(4)} → ctxAnchor=${this.ctx.currentTime.toFixed(4)} ctxNow=${this.ctx.currentTime.toFixed(4)} pendingCount=${this.pendingQueue.length}`);
+      }
       // Resume: media time should continue from where we paused. ctx.currentTime
       // is preserved across suspend/resume, so re-anchoring it to "now" with
       // the same mediaTimeOfAnchor gives a continuous clock.
@@ -295,7 +415,7 @@ export class AudioOutput implements ClockSource {
       const drain = this.pendingQueue;
       this.pendingQueue = [];
       for (const c of drain) {
-        this.scheduleNow(c.samples, c.channels, c.sampleRate, c.frameCount);
+        this.scheduleNow(c.samples, c.channels, c.sampleRate, c.frameCount, c.ptsSec);
       }
       return;
     }
@@ -307,11 +427,15 @@ export class AudioOutput implements ClockSource {
     this.ctxTimeAtAnchor = this.ctx.currentTime + STARTUP_DELAY;
     this.mediaTimeOfNext = this.mediaTimeOfAnchor;
     this.state = "playing";
+    if (isDebug()) {
+      // eslint-disable-next-line no-console
+      console.log(`[TRACE-AUD] START(cold) anchor=${this.mediaTimeOfAnchor.toFixed(3)} ctxAnchor=${this.ctxTimeAtAnchor.toFixed(4)} mtNext=${this.mediaTimeOfNext.toFixed(3)} ctxNow=${this.ctx.currentTime.toFixed(4)} pendingCount=${this.pendingQueue.length}`);
+    }
 
     const drain = this.pendingQueue;
     this.pendingQueue = [];
     for (const c of drain) {
-      this.scheduleNow(c.samples, c.channels, c.sampleRate, c.frameCount);
+      this.scheduleNow(c.samples, c.channels, c.sampleRate, c.frameCount, c.ptsSec);
     }
   }
 
@@ -341,6 +465,10 @@ export class AudioOutput implements ClockSource {
    * supplying new samples) and then call `start()` to resume playback.
    */
   async reset(newMediaTime: number): Promise<void> {
+    if (isDebug()) {
+      // eslint-disable-next-line no-console
+      console.log(`[TRACE-AUD] RESET to=${newMediaTime.toFixed(3)} prev_anchor=${this.mediaTimeOfAnchor.toFixed(3)} prev_mtNext=${this.mediaTimeOfNext.toFixed(3)} prev_ctxAnchor=${this.ctxTimeAtAnchor.toFixed(4)} ctxNow=${this.ctx.currentTime.toFixed(4)} state=${this.state}`);
+    }
     if (this.noAudio) {
       this.pendingQueue = [];
       this.mediaTimeOfAnchor = newMediaTime;
@@ -358,6 +486,7 @@ export class AudioOutput implements ClockSource {
     this.mediaTimeOfAnchor = newMediaTime;
     this.mediaTimeOfNext = newMediaTime;
     this.ctxTimeAtAnchor = this.ctx.currentTime;
+    this.firstAudibleCtxStart = -1;
     this.state = "idle";
 
     if (this.ctx.state === "running") {