Clear demo: ten Detail recordings, before/after

index.html

@@ -272,13 +272,6 @@ Works best with files shorter than 10 minutes.</span>
   <span class="label">Try with your audio</span>
 </a>
 
-<!-- Two hidden <audio> elements drive the raw + enhanced playback in
-     parallel; their `.volume` properties carry the mix slider (raw vs
-     active enhanced). Using <audio> instead of Web Audio routes through
-     iOS's media playback channel, which ignores the ringer/silent switch. -->
-<audio id="audioRaw" preload="auto" playsinline aria-hidden="true"></audio>
-<audio id="audioEnh" preload="auto" playsinline aria-hidden="true"></audio>
-
 <script src="main.js"></script>
 <script src="try-browser.js" type="module"></script>
 </body>

try-browser.js

@@ -13,7 +13,6 @@
 import { Clear, SR, encodeWav, decodeToMono } from './lib-clear/clear.js';
 import { encodeM4A } from './lib-clear/encode-m4a.js';
 
-
 const M4A_INPUT_EXTS = ['m4a', 'mp4', 'mov', 'aac', 'm4b'];
 
 const HF = 'https://huggingface.co/detail-co/clear/resolve/main';
@@ -436,21 +435,36 @@ function buildMetaSentence(variant, result, backend) {
   return `Enhanced ${dur} in ${proc}.\n${Math.round(rt)}× realtime on ${back}.`;
 }
 
-// ── A/B player via two <audio> elements ───────────────────────────────
-// iOS Safari refuses to play Web Audio through the silent switch, even
-// with the parallel-silencer hack. Routing through native <audio>
-// elements puts the page on the media playback channel (which ignores
-// the silent switch), but we lose:
-//   - Seamless variant toggle (now there's a brief gap while audio.src
-//     swaps to the other variant's WAV blob).
-//   - Sample-accurate parallel scheduling. Two <audio> elements drift
-//     by a few ms across long clips; we resync currentTime on play.
-// What we keep: the live mix slider — raw and enhanced play in parallel
-// with `audio.volume` blending between them.
+// ── Sample-aligned A/B player (raw ↔ enhanced via mix slider) ─────────
 
+/**
+ * Sample-aligned multi-track A/B player. Raw + every cached enhanced
+ * variant ({ studio, natural, ... }) are scheduled in parallel and routed
+ * through one GainNode each. Toggling between variants is just a gain
+ * swap — playback continues without restart. The mix slider crossfades
+ * raw against whichever enhanced track is currently active.
+ */
 function createABPlayer({ raw, enhancedTracks, activeVariant, sampleRate }) {
-  const audioRaw = document.getElementById('audioRaw');
-  const audioEnh = document.getElementById('audioEnh');
+  let ctx = null;
+  let bufRaw = null;
+  const bufsEnh = {};        // variant → AudioBuffer
+  let srcRaw = null;
+  const srcsEnh = {};        // variant → AudioBufferSourceNode
+  let gainRaw = null;
+  const gainsEnh = {};       // variant → GainNode
+  let isPlaying = false;
+  let playStartCtxTime = 0;
+  let pausePos = 0;
+  let mix = 1.0;
+  let active = activeVariant;
+  let rafId = null;
+  let unlocked = false;  // iOS Safari: needs a silent buffer kick on first play
+  const longest = Math.max(
+    raw.length,
+    ...Object.values(enhancedTracks).map((s) => s.length),
+  );
+  const duration = longest / sampleRate;
+
   const playBtn  = $('tryPlayBtn');
   const scrubber = $('tryScrubber');
   const progress = scrubber.querySelector('.progress');
@@ -458,129 +472,139 @@ function createABPlayer({ raw, enhancedTracks, activeVariant, sampleRate }) {
   const tot = scrubber.parentElement.querySelector('.tot');
   const slider = $('tryMixSlider');
 
-  // Encode each track once as a WAV blob URL — <audio>.src takes a URL.
-  const rawURL = URL.createObjectURL(encodeWav(raw, sampleRate));
-  const enhURLs = {};
-  for (const [v, s] of Object.entries(enhancedTracks)) {
-    enhURLs[v] = URL.createObjectURL(encodeWav(s, sampleRate));
+  function ensureCtx() {
+    if (ctx) return;
+    const Ctor = window.AudioContext || window.webkitAudioContext;
+    // iOS 14 and older Safari reject the sampleRate constructor arg —
+    // fall back to a default-rate context. AudioBuffers we make below
+    // still declare sampleRate=48 kHz; the source node auto-resamples
+    // to whatever ctx.sampleRate actually is.
+    try { ctx = new Ctor({ sampleRate }); }
+    catch { ctx = new Ctor(); }
+    bufRaw = ctx.createBuffer(1, raw.length, sampleRate);
+    bufRaw.copyToChannel(raw, 0);
+    gainRaw = ctx.createGain();
+    gainRaw.connect(ctx.destination);
+    for (const [v, samples] of Object.entries(enhancedTracks)) {
+      bufsEnh[v] = ctx.createBuffer(1, samples.length, sampleRate);
+      bufsEnh[v].copyToChannel(samples, 0);
+      gainsEnh[v] = ctx.createGain();
+      gainsEnh[v].connect(ctx.destination);
+    }
+    applyMix();
+  }
+  /** iOS Safari unlock — fires a 1-sample silent buffer on first play so
+   *  subsequent AudioBufferSourceNode.start() calls actually produce sound.
+   *  No-op on desktop. Must run inside the user-gesture call stack. */
+  function unlockIOSAudio() {
+    if (unlocked || !ctx) return;
+    try {
+      const src = ctx.createBufferSource();
+      src.buffer = ctx.createBuffer(1, 1, ctx.sampleRate);
+      src.connect(ctx.destination);
+      src.start(0);
+      unlocked = true;
+    } catch {}
   }
-
-  let mix = 1.0;
-  let active = activeVariant;
-  let rafId = null;
-  let variantSwapping = false;
-
-  audioRaw.loop = false;
-  audioEnh.loop = false;
-  audioRaw.src = rawURL;
-  audioEnh.src = enhURLs[active];
-
   function applyMix() {
-    audioRaw.volume = Math.max(0, Math.min(1, 1 - mix));
-    audioEnh.volume = Math.max(0, Math.min(1, mix));
+    if (!ctx) return;
+    gainRaw.gain.value = 1 - mix;
+    for (const v of Object.keys(gainsEnh)) {
+      gainsEnh[v].gain.value = (v === active) ? mix : 0;
+    }
   }
-  applyMix();
-
-  function paintSlider() {
-    slider.style.setProperty('--p', `${slider.value}%`);
+  function startSources(offset) {
+    const startAt = ctx.currentTime + START_LEAD;
+    srcRaw = ctx.createBufferSource();
+    srcRaw.buffer = bufRaw;
+    srcRaw.connect(gainRaw);
+    srcRaw.start(startAt, offset);
+    for (const v of Object.keys(bufsEnh)) {
+      const s = ctx.createBufferSource();
+      s.buffer = bufsEnh[v];
+      s.connect(gainsEnh[v]);
+      s.start(startAt, offset);
+      srcsEnh[v] = s;
+    }
+    srcRaw.onended = () => {
+      if (isPlaying) {
+        isPlaying = false;
+        pausePos = 0;
+        playBtn.dataset.state = 'paused';
+        playBtn.innerHTML = ICON_PLAY;
+        stopRaf();
+      }
+    };
+    playStartCtxTime = startAt;
+    isPlaying = true;
+    pausePos = offset;
+    startRaf();
+  }
+  function stopSources() {
+    for (const s of [srcRaw, ...Object.values(srcsEnh)]) {
+      if (!s) continue;
+      try { s.onended = null; s.stop(); } catch {}
+      try { s.disconnect(); } catch {}
+    }
+    srcRaw = null;
+    for (const v of Object.keys(srcsEnh)) delete srcsEnh[v];
+    isPlaying = false;
+    stopRaf();
+  }
+  function currentPos() {
+    if (isPlaying) {
+      const elapsed = pausePos + (ctx.currentTime - playStartCtxTime);
+      return Math.min(duration, Math.max(0, elapsed));
+    }
+    return pausePos;
   }
-
-  // Use the enhanced track as the timing master. They're the same length
-  // (mono PCM, identical sample count), so any drift is just clock jitter
-  // between two parallel HTML media elements. Resync on play/seek.
-  const getDuration = () => audioEnh.duration || (raw.length / sampleRate);
-  const getPosition = () => audioEnh.currentTime || 0;
-
   function syncTimes() {
-    const p = getPosition();
-    const d = getDuration();
+    const p = currentPos();
     cur.textContent = fmtTime(p);
-    tot.textContent = fmtTime(d);
-    progress.style.width = `${d > 0 ? Math.min(100, (p / d) * 100) : 0}%`;
+    tot.textContent = fmtTime(duration);
+    progress.style.width = `${Math.min(100, (p / duration) * 100)}%`;
   }
   function startRaf() {
     if (rafId) return;
-    const tick = () => {
-      syncTimes();
-      if (!audioEnh.paused) rafId = requestAnimationFrame(tick);
-      else rafId = null;
-    };
+    const tick = () => { syncTimes(); if (isPlaying) rafId = requestAnimationFrame(tick); };
     rafId = requestAnimationFrame(tick);
   }
   function stopRaf() {
     if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
     syncTimes();
   }
-
   async function play() {
-    // Resync raw to enhanced before playing so they start aligned.
-    audioRaw.currentTime = audioEnh.currentTime;
-    // Both `.play()`s fire from this same user gesture (the play button
-    // click that called us) so iOS counts them as user-initiated.
-    await Promise.all([
-      audioEnh.play().catch(() => {}),
-      audioRaw.play().catch(() => {}),
-    ]);
-    startRaf();
+    ensureCtx();
+    // Fire the iOS unlock SYNCHRONOUSLY inside the user gesture stack —
+    // before any await — so Safari registers it as a user-initiated
+    // playback. Calling ctx.resume() and starting the silent source
+    // both have to happen within the same gesture-induced call.
+    unlockIOSAudio();
+    if (ctx.state !== 'running') {
+      const resumed = ctx.resume();
+      // Some Safaris return undefined here; guard before awaiting.
+      if (resumed && typeof resumed.then === 'function') await resumed;
+    }
+    startSources(pausePos);
   }
   function pause() {
-    audioRaw.pause();
-    audioEnh.pause();
-    stopRaf();
+    const pos = currentPos();
+    stopSources();
+    pausePos = Math.min(duration, pos);
   }
   function seekTo(t) {
-    const d = getDuration();
-    const pos = Math.max(0, Math.min(d - 0.01, t));
-    audioRaw.currentTime = pos;
-    audioEnh.currentTime = pos;
-    syncTimes();
+    const wasPlaying = isPlaying;
+    if (wasPlaying) stopSources();
+    pausePos = Math.max(0, Math.min(duration - 0.01, t));
+    if (wasPlaying) startSources(pausePos);
+    else syncTimes();
   }
-  audioEnh.addEventListener('ended', () => {
-    audioRaw.pause();
-    playBtn.dataset.state = 'paused';
-    playBtn.innerHTML = ICON_PLAY;
-    stopRaf();
-  });
-
-  // ── Variant swap (Studio ↔ Natural) ─────────────────────────────────
-  // <audio>.src swap drops position + state. Capture both, restore after
-  // the new buffer is ready.
-  async function setActiveVariant(v) {
-    if (!(v in enhURLs)) return false;
-    if (variantSwapping) return false;
-    if (v === active) return true;
-    variantSwapping = true;
-    const wasPlaying = !audioEnh.paused;
-    const pos = audioEnh.currentTime || 0;
-    audioEnh.pause();
-    audioEnh.src = enhURLs[v];
-    active = v;
-    try {
-      await new Promise((resolve) => {
-        const ready = () => { audioEnh.removeEventListener('loadedmetadata', ready); resolve(); };
-        if (audioEnh.readyState >= 1) ready();
-        else audioEnh.addEventListener('loadedmetadata', ready);
-      });
-      audioEnh.currentTime = pos;
-      audioRaw.currentTime = pos;
-      if (wasPlaying) {
-        await Promise.all([
-          audioEnh.play().catch(() => {}),
-          audioRaw.play().catch(() => {}),
-        ]);
-        startRaf();
-      } else {
-        syncTimes();
-      }
-    } finally {
-      variantSwapping = false;
-    }
-    return true;
+  function paintSlider() {
+    slider.style.setProperty('--p', `${slider.value}%`);
   }
 
-  // ── Event wiring ─────────────────────────────────────────────────────
   const onPlayClick = async () => {
-    if (audioEnh.paused) {
+    if (!isPlaying) {
       await play();
       playBtn.dataset.state = 'playing';
       playBtn.innerHTML = ICON_PAUSE;
@@ -593,7 +617,7 @@ function createABPlayer({ raw, enhancedTracks, activeVariant, sampleRate }) {
   const onScrubClick = (e) => {
     const rect = scrubber.getBoundingClientRect();
     const pct = (e.clientX - rect.left) / rect.width;
-    seekTo(pct * getDuration());
+    seekTo(pct * duration);
   };
   const onSlider = () => { mix = slider.value / 100; applyMix(); paintSlider(); };
   const mixEnds = document.querySelectorAll('#tryPlayer .mix-end');
@@ -611,46 +635,44 @@ function createABPlayer({ raw, enhancedTracks, activeVariant, sampleRate }) {
   playBtn.dataset.state = 'paused';
   playBtn.innerHTML = ICON_PLAY;
   slider.value = 100; mix = 1.0;
-  paintSlider();
+  paintSlider(); syncTimes();
 
   playBtn.addEventListener('click', onPlayClick);
   scrubber.addEventListener('click', onScrubClick);
   slider.addEventListener('input', onSlider);
 
-  // Once metadata lands on either element, the duration becomes known.
-  audioEnh.addEventListener('loadedmetadata', syncTimes);
-  syncTimes();
-
   return {
-    get isPlaying() { return !audioEnh.paused; },
-    getPosition,
-    hasVariant: (v) => v in enhURLs,
-    setActiveVariant,
+    get isPlaying() { return isPlaying; },
+    getPosition: currentPos,
+    hasVariant(v) { return v in enhancedTracks; },
+    /** Swap which enhanced track is heard — seamless gain change, no restart. */
+    setActiveVariant(v) {
+      if (!(v in enhancedTracks)) return false;
+      active = v;
+      applyMix();
+      return true;
+    },
     async play() {
-      if (!audioEnh.paused) return;
+      if (isPlaying) return;
       await play();
       playBtn.dataset.state = 'playing';
       playBtn.innerHTML = ICON_PAUSE;
     },
     seekTo,
     pauseIfPlaying() {
-      if (!audioEnh.paused) {
+      if (isPlaying) {
         pause();
         playBtn.dataset.state = 'paused';
         playBtn.innerHTML = ICON_PLAY;
       }
     },
     dispose() {
-      pause();
-      audioEnh.removeEventListener('loadedmetadata', syncTimes);
+      stopSources();
       playBtn.removeEventListener('click', onPlayClick);
       scrubber.removeEventListener('click', onScrubClick);
       slider.removeEventListener('input', onSlider);
       for (const [btn, h] of mixEndHandlers) btn.removeEventListener('click', h);
-      audioRaw.removeAttribute('src'); audioRaw.load();
-      audioEnh.removeAttribute('src'); audioEnh.load();
-      URL.revokeObjectURL(rawURL);
-      for (const u of Object.values(enhURLs)) URL.revokeObjectURL(u);
+      if (ctx) ctx.close();
     },
   };
 }