web: show a progress bar during ffmpeg.wasm audio extraction

Syncing against a video/audio reference decodes it to PCM with ffmpeg.wasm
first — the slow part — but the UI only showed a static "decoding audio…"
line. Surface ffmpeg's existing 0–1 progress event as a themed progress bar
shown during decode: indeterminate while ffmpeg.wasm loads, then a live
percentage while decoding, hidden once decode completes (the VAD/align phase
has no measurable progress and keeps the text status).

Decode runs on the main thread, so the callback updates the DOM directly — no
new worker plumbing. Non-finite/out-of-range fractions keep the bar
indeterminate rather than showing a bogus percentage.

Author: smacke

web/index.html

@@ -68,6 +68,40 @@
       button:disabled { opacity: .5; cursor: not-allowed; }
       #status { color: var(--muted); font-size: .9rem; margin-top: .75rem; min-height: 1.4em; }
       #status.error { color: var(--error); white-space: pre-wrap; }
+      .progress { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
+      .progress-track {
+        flex: 1;
+        height: 8px;
+        border-radius: 999px;
+        overflow: hidden;
+        background: color-mix(in srgb, var(--fg) 12%, transparent);
+      }
+      .progress-fill {
+        height: 100%;
+        width: 0%;
+        background: var(--accent);
+        border-radius: 999px;
+        transition: width .15s ease;
+      }
+      .progress-pct {
+        font-variant-numeric: tabular-nums;
+        font-size: .8rem;
+        color: var(--muted);
+        min-width: 3.5ch;
+        text-align: right;
+      }
+      .progress.indeterminate .progress-fill {
+        width: 40%;
+        animation: progress-slide 1.1s ease-in-out infinite;
+      }
+      .progress.indeterminate .progress-pct { visibility: hidden; }
+      @keyframes progress-slide {
+        0% { margin-left: -40%; }
+        100% { margin-left: 100%; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .progress.indeterminate .progress-fill { animation: none; }
+      }
       #result { margin-top: 1rem; }
       #offset { font-variant-numeric: tabular-nums; font-weight: 600; }
       a#download {
@@ -125,6 +159,11 @@ <h1>ffsubsync <span class="hint">in the browser</span></h1>
 
       <button id="sync-btn" disabled>Sync subtitles</button>
       <div id="status"></div>
+      <div id="progress" class="progress" role="progressbar"
+           aria-valuemin="0" aria-valuemax="100" hidden>
+        <div class="progress-track"><div class="progress-fill" id="progress-fill"></div></div>
+        <span class="progress-pct" id="progress-pct"></span>
+      </div>
 
       <div id="result" class="card" hidden>
         <div><span id="offset"></span></div>

web/src/ffmpeg_decode.mjs

@@ -29,7 +29,7 @@ async function getFfmpeg(cfg, status) {
   return _ffmpegPromise;
 }
 
-export async function decodeAudioToPcm(cfg, file, { status, stream } = {}) {
+export async function decodeAudioToPcm(cfg, file, { status, stream, onProgress } = {}) {
   const ffmpeg = await getFfmpeg(cfg, status);
   const frameRate = cfg.frameRate || 16000;
   const mountDir = "/mnt";
@@ -38,6 +38,10 @@ export async function decodeAudioToPcm(cfg, file, { status, stream } = {}) {
   const mounted = `${mountDir}/${file.name}`;
 
   status && status("decoding audio (this can take a bit on long videos)…");
+  // ffmpeg reports decode progress as a 0–1 fraction. The instance is memoized in
+  // getFfmpeg, so the listener MUST be removed after this decode.
+  const onP = onProgress ? ({ progress }) => onProgress(progress) : null;
+  if (onP) ffmpeg.on("progress", onP);
   try {
     try {
       await ffmpeg.createDir(mountDir);
@@ -62,6 +66,7 @@ export async function decodeAudioToPcm(cfg, file, { status, stream } = {}) {
     const data = await ffmpeg.readFile(outPath); // Uint8Array
     return data;
   } finally {
+    if (onP) ffmpeg.off("progress", onP);
     try {
       await ffmpeg.deleteFile(outPath);
     } catch {

web/src/main.js

@@ -10,6 +10,9 @@ const els = {
   gss: document.getElementById("gss"),
   syncBtn: document.getElementById("sync-btn"),
   status: document.getElementById("status"),
+  progress: document.getElementById("progress"),
+  progressFill: document.getElementById("progress-fill"),
+  progressPct: document.getElementById("progress-pct"),
   result: document.getElementById("result"),
   offset: document.getElementById("offset"),
   download: document.getElementById("download"),
@@ -121,6 +124,7 @@ async function onSync() {
     // lazily via WORKERFS — never fully read into memory — then only the decoded
     // PCM is transferred to the Pyodide worker for VAD + alignment.
     let pcm;
+    showProgress();
     try {
       const { decodeAudioToPcm } = await import(
         withV(new URL("./ffmpeg_decode.mjs", import.meta.url).href)
@@ -131,13 +135,20 @@ async function onSync() {
         module: withV(new URL(ffmpegConfig.module, document.baseURI).href),
         util: withV(new URL(ffmpegConfig.util, document.baseURI).href),
       };
-      pcm = await decodeAudioToPcm(ff, refFile, { status: setStatus });
+      pcm = await decodeAudioToPcm(ff, refFile, {
+        status: setStatus,
+        onProgress: setProgress,
+      });
     } catch (e) {
       console.error(e);
+      hideProgress();
       setStatus("audio decode failed: " + (e && e.message || e), true);
       setBusy(false);
       return;
     }
+    // Decode done; the VAD/align phase has no measurable progress, so drop back
+    // to the text status.
+    hideProgress();
     worker.postMessage(
       {
         type: "syncAudioPcm",
@@ -198,8 +209,38 @@ function setStatus(text, isError = false) {
   els.status.classList.toggle("error", isError);
 }
 
+// Show the decode progress bar, starting indeterminate (ffmpeg.wasm loads before
+// any progress events arrive).
+function showProgress() {
+  els.progress.hidden = false;
+  els.progress.classList.add("indeterminate");
+  els.progressFill.style.width = "0%";
+  els.progressPct.textContent = "";
+  els.progress.removeAttribute("aria-valuenow");
+}
+
+// Drive the bar from ffmpeg's 0–1 progress. A non-finite or out-of-range value
+// (duration unknown) keeps the bar indeterminate rather than showing a bogus %.
+function setProgress(fraction) {
+  if (Number.isFinite(fraction) && fraction > 0 && fraction <= 1) {
+    const pct = Math.round(fraction * 100);
+    els.progress.classList.remove("indeterminate");
+    els.progressFill.style.width = pct + "%";
+    els.progressPct.textContent = pct + "%";
+    els.progress.setAttribute("aria-valuenow", String(pct));
+  }
+}
+
+function hideProgress() {
+  els.progress.hidden = true;
+  els.progress.classList.remove("indeterminate");
+}
+
 function setBusy(busy) {
   els.syncBtn.disabled = busy;
   els.syncBtn.textContent = busy ? "Syncing…" : "Sync subtitles";
-  if (!busy) refreshButton();
+  if (!busy) {
+    hideProgress();
+    refreshButton();
+  }
 }