Disentangle gen wall-clock from audio length; convert recorded blobs to WAV before upload

index.html

@@ -1745,6 +1745,40 @@ function pickRecorderMimeType() {
   return "";
 }
 
+// Decode any recorded blob and re-encode as 16-bit PCM WAV so soundfile-based
+// upstreams (resemble-enhance, etc.) can read it.
+async function recordedBlobToWavFile(blob, baseName) {
+  const Ctx = window.AudioContext || window.webkitAudioContext;
+  const ctx = new Ctx();
+  const arr = await blob.arrayBuffer();
+  const audioBuf = await ctx.decodeAudioData(arr.slice(0));
+  ctx.close?.();
+  const numCh = audioBuf.numberOfChannels;
+  const sampleRate = audioBuf.sampleRate;
+  const numFrames = audioBuf.length;
+  const dataLen = numFrames * numCh * 2;
+  const buf = new ArrayBuffer(44 + dataLen);
+  const view = new DataView(buf);
+  let p = 0;
+  const w8 = s => { for (let i = 0; i < s.length; i++) view.setUint8(p++, s.charCodeAt(i)); };
+  const w32 = v => { view.setUint32(p, v, true); p += 4; };
+  const w16 = v => { view.setUint16(p, v, true); p += 2; };
+  w8("RIFF"); w32(36 + dataLen); w8("WAVE");
+  w8("fmt "); w32(16); w16(1); w16(numCh); w32(sampleRate);
+  w32(sampleRate * numCh * 2); w16(numCh * 2); w16(16);
+  w8("data"); w32(dataLen);
+  const channels = [];
+  for (let c = 0; c < numCh; c++) channels.push(audioBuf.getChannelData(c));
+  for (let i = 0; i < numFrames; i++) {
+    for (let c = 0; c < numCh; c++) {
+      const s = Math.max(-1, Math.min(1, channels[c][i]));
+      view.setInt16(p, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+      p += 2;
+    }
+  }
+  return new File([buf], `${baseName}.wav`, { type: "audio/wav" });
+}
+
 window.toggleRecord = async function() {
   const btn = document.getElementById("record-mic-btn");
   const hint = document.getElementById("record-hint");
@@ -1767,22 +1801,25 @@ window.toggleRecord = async function() {
   mediaRecorder = mimeType ? new MediaRecorder(mediaStream, { mimeType }) : new MediaRecorder(mediaStream);
   recordedChunks = [];
   mediaRecorder.ondataavailable = e => { if (e.data && e.data.size) recordedChunks.push(e.data); };
-  mediaRecorder.onstop = () => {
+  mediaRecorder.onstop = async () => {
     clearInterval(recordTimerInterval);
     btn.classList.remove("recording");
     const elapsedSec = (Date.now() - recordStartTime) / 1000;
     const type = mediaRecorder.mimeType || "audio/webm";
-    const blob = new Blob(recordedChunks, { type });
-    const ext = type.includes("mp4") ? "m4a" : type.includes("ogg") ? "ogg" : "webm";
-    const fileName = `recording_${Date.now()}.${ext}`;
-    blob.arrayBuffer().then(buf => {
-      modalFileData = { name: fileName, data: buf, type };
+    const rawBlob = new Blob(recordedChunks, { type });
+    hint.textContent = "Converting…";
+    try {
+      const wavFile = await recordedBlobToWavFile(rawBlob, `recording_${Date.now()}`);
+      const wavBuf = await wavFile.arrayBuffer();
+      modalFileData = { name: wavFile.name, data: wavBuf, type: "audio/wav" };
       const preview = document.getElementById("record-preview");
-      preview.src = URL.createObjectURL(blob);
+      preview.src = URL.createObjectURL(wavFile);
       preview.style.display = "";
       hint.textContent = `Recorded ${elapsedSec.toFixed(1)}s · click mic to re-record`;
       checkModalSave();
-    });
+    } catch (err) {
+      hint.textContent = `Recording failed: ${err.message}`;
+    }
     if (mediaStream) { mediaStream.getTracks().forEach(t => t.stop()); mediaStream = null; }
   };
   recordStartTime = Date.now();
@@ -1947,6 +1984,7 @@ window.generateDesign = async function() {
   progressFill.style.width = "0%";
 
   const sessionHash = crypto.randomUUID();
+  const t0 = Date.now();
 
   try {
     const joinRes = await fetch(`${QWEN_BASE}/queue/join`, {
@@ -1989,14 +2027,14 @@ window.generateDesign = async function() {
         else if (data.msg === "process_completed") {
           progressFill.style.width = "100%";
           if (data.success) {
-            const dur = data.output.duration || 0;
+            const wallSec = (Date.now() - t0) / 1000;
             designAudioUrl = data.output.data[0].url;
             document.getElementById("design-audio-player").src = designAudioUrl;
             document.getElementById("design-player-title").textContent = text.slice(0, 60) + (text.length > 60 ? "..." : "");
-            document.getElementById("design-player-meta").textContent = `Voice Design · ${dur.toFixed(1)}s · ${text.length} chars`;
+            setPlayerMeta("design", "Voice Design", `${text.length} chars`);
             result.classList.add("visible");
-            showDesignStatus("success", `Generated in ${dur.toFixed(1)}s`);
-            addToHistory(text, "Voice Design", dur, designAudioUrl);
+            showDesignStatus("success", `Generated in ${wallSec.toFixed(1)}s`);
+            addToHistory(text, "Voice Design", wallSec, designAudioUrl);
           } else {
             const errMsg = data.output?.error || "Generation failed";
             showDesignStatusWithCTA(errMsg);
@@ -2118,6 +2156,7 @@ window.transcribe = async function() {
   const lang = document.getElementById("transcribe-lang").value;
   const btn = transcribeBtn;
   const result = document.getElementById("transcribe-result");
+  const t0 = Date.now();
 
   btn.disabled = true;
   btn.classList.add("loading");
@@ -2182,7 +2221,7 @@ window.transcribe = async function() {
             const transcript = data.output.data[0];
             document.getElementById("transcribe-text").textContent = transcript;
             result.style.display = "block";
-            showTranscribeStatus("success", `Transcribed in ${data.output.duration?.toFixed(1)}s`);
+            showTranscribeStatus("success", `Transcribed in ${((Date.now() - t0) / 1000).toFixed(1)}s`);
           } else {
             showTranscribeStatusWithCTA(data.output?.error || "Transcription failed");
           }
@@ -2897,21 +2936,26 @@ window.toggleInputRecord = async function(prefix) {
     document.getElementById(`${prefix}-timer`).textContent = `${Math.floor(e/60)}:${(e%60).toString().padStart(2,"0")}`;
   }, 200);
   inputRecorders[prefix] = { mediaRecorder: mr, stream, chunks, timerInterval, startTime };
-  mr.onstop = () => {
+  mr.onstop = async () => {
     clearInterval(timerInterval);
     btn.classList.remove("recording");
     const elapsedSec = (Date.now() - startTime) / 1000;
     const type = mr.mimeType || "audio/webm";
-    const blob = new Blob(chunks, { type });
-    const ext = type.includes("mp4") ? "m4a" : type.includes("ogg") ? "ogg" : "webm";
-    const file = new File([blob], `recording_${Date.now()}.${ext}`, { type });
-    const preview = document.getElementById(`${prefix}-preview-audio`);
-    preview.src = URL.createObjectURL(blob);
-    preview.style.display = "";
-    hint.textContent = `Recorded ${elapsedSec.toFixed(1)}s · click mic to re-record`;
-    stream.getTracks().forEach(t => t.stop());
-    delete inputRecorders[prefix];
-    inputRecordHandlers[prefix]?.(file);
+    const rawBlob = new Blob(chunks, { type });
+    hint.textContent = "Converting…";
+    try {
+      const file = await recordedBlobToWavFile(rawBlob, `recording_${Date.now()}`);
+      const preview = document.getElementById(`${prefix}-preview-audio`);
+      preview.src = URL.createObjectURL(file);
+      preview.style.display = "";
+      hint.textContent = `Recorded ${elapsedSec.toFixed(1)}s · click mic to re-record`;
+      inputRecordHandlers[prefix]?.(file);
+    } catch (err) {
+      hint.textContent = `Recording failed: ${err.message}`;
+    } finally {
+      stream.getTracks().forEach(t => t.stop());
+      delete inputRecorders[prefix];
+    }
   };
   hint.textContent = "Recording… click again to stop";
   btn.classList.add("recording");
@@ -3007,6 +3051,7 @@ async function uploadFile(base, file) {
 // Run a queue/join + queue/data SSE call. Returns { output, duration }.
 // statusElId/progressFillId are optional and used for UI updates.
 async function gradioCall({ base, fnIndex, data, statusElId, progressFillId, processingMsg }) {
+  const t0 = Date.now();
   const session = crypto.randomUUID();
   if (statusElId) showStatusOn(statusElId, "info", "Joining queue...");
 
@@ -3054,7 +3099,10 @@ async function gradioCall({ base, fnIndex, data, statusElId, progressFillId, pro
       }
       if (evt.msg === "process_completed") {
         if (progressFillId) document.getElementById(progressFillId).style.width = "100%";
-        if (evt.success) return { output: evt.output, duration: evt.output.duration || 0 };
+        if (evt.success) {
+          const wallClock = (Date.now() - t0) / 1000;
+          return { output: evt.output, duration: evt.output.duration || wallClock, wallClock };
+        }
         throw new Error(evt.output?.error || "Generation failed");
       }
     }
@@ -3062,6 +3110,21 @@ async function gradioCall({ base, fnIndex, data, statusElId, progressFillId, pro
   throw new Error("Stream ended without completion");
 }
 
+// Update a player-meta line with the audio's actual duration once it loads.
+function setPlayerMeta(prefix, leadingText, trailingText) {
+  const audioId = prefix ? `${prefix}-audio-player` : "audio-player";
+  const metaId = prefix ? `${prefix}-player-meta` : "player-meta";
+  const audio = document.getElementById(audioId);
+  const meta = document.getElementById(metaId);
+  if (!audio || !meta) return;
+  const paint = () => {
+    const d = isFinite(audio.duration) && audio.duration > 0 ? `${audio.duration.toFixed(1)}s` : "";
+    meta.textContent = [leadingText, d, trailingText].filter(Boolean).join(" · ");
+  };
+  audio.addEventListener("loadedmetadata", paint, { once: true });
+  paint();
+}
+
 // Pull a URL out of a gradio Audio output (object {url} or {path} ref).
 function audioUrlFromOutput(out, base) {
   if (!out) return null;
@@ -3104,7 +3167,7 @@ window.voiceChange = async function() {
     showStatusOn("vc-status", "info", "Uploading audio...");
     const [src, tgt] = await Promise.all([uploadFile(SEED_VC_BASE, vcSource), uploadFile(SEED_VC_BASE, vcTarget)]);
 
-    const { output, duration } = await gradioCall({
+    const { output, wallClock } = await gradioCall({
       base: SEED_VC_BASE,
       fnIndex: 3,
       data: [src, tgt, parseInt(vcSteps.value), 1.0, 0.0, vcSim.value / 100, 0.9, 1.0, 1.0, false, false],
@@ -3118,9 +3181,9 @@ window.voiceChange = async function() {
     if (!url) throw new Error("No audio returned");
     resultUrls.vc = url;
     document.getElementById("vc-audio-player").src = url;
-    document.getElementById("vc-player-meta").textContent = `${vcSource.name} → ${vcTarget.name} · ${duration.toFixed(1)}s`;
+    setPlayerMeta("vc", `${vcSource.name} → ${vcTarget.name}`);
     result.classList.add("visible");
-    showStatusOn("vc-status", "success", `Converted in ${duration.toFixed(1)}s`);
+    showStatusOn("vc-status", "success", `Converted in ${wallClock.toFixed(1)}s`);
   } catch (err) {
     showStatusCtaOn("vc-status", err.message);
   } finally {
@@ -3166,7 +3229,7 @@ window.voiceIsolate = async function() {
     showStatusOn("iso-status", "info", "Uploading audio...");
     const fileRef = await uploadFile(RESEMBLE_BASE, isoFile);
 
-    const { output, duration } = await gradioCall({
+    const { output, wallClock } = await gradioCall({
       base: RESEMBLE_BASE,
       fnIndex: 2,
       data: [fileRef, "Midpoint", parseInt(isoNfe.value), isoTau.value / 100, denoiseOnly],
@@ -3182,9 +3245,9 @@ window.voiceIsolate = async function() {
     resultUrls.iso = url;
     document.getElementById("iso-audio-player").src = url;
     document.getElementById("iso-player-title").textContent = denoiseOnly ? "Denoised audio" : "Enhanced audio";
-    document.getElementById("iso-player-meta").textContent = `${isoFile.name} · ${duration.toFixed(1)}s`;
+    setPlayerMeta("iso", isoFile.name);
     result.classList.add("visible");
-    showStatusOn("iso-status", "success", `Done in ${duration.toFixed(1)}s`);
+    showStatusOn("iso-status", "success", `Done in ${wallClock.toFixed(1)}s`);
   } catch (err) {
     showStatusCtaOn("iso-status", err.message);
   } finally {
@@ -3220,7 +3283,7 @@ window.soundEffect = async function() {
   progressFill.style.width = "0%";
 
   try {
-    const { output, duration } = await gradioCall({
+    const { output, wallClock } = await gradioCall({
       base: STABLE_AUDIO_BASE,
       fnIndex: 3,
       // /infer params: variant_key, prompt, duration, steps, cfg_scale, sampler_type, seed
@@ -3235,9 +3298,9 @@ window.soundEffect = async function() {
     resultUrls.sfx = url;
     document.getElementById("sfx-audio-player").src = url;
     document.getElementById("sfx-player-title").textContent = prompt.slice(0, 60) + (prompt.length > 60 ? "..." : "");
-    document.getElementById("sfx-player-meta").textContent = `${sfxDuration.value}s · ${duration.toFixed(1)}s gen`;
+    setPlayerMeta("sfx", `Prompt: "${prompt.slice(0,40)}${prompt.length>40?"...":""}"`);
     result.classList.add("visible");
-    showStatusOn("sfx-status", "success", `Generated in ${duration.toFixed(1)}s`);
+    showStatusOn("sfx-status", "success", `Generated in ${wallClock.toFixed(1)}s`);
   } catch (err) {
     showStatusCtaOn("sfx-status", err.message);
   } finally {
@@ -3284,6 +3347,7 @@ window.generate = async function() {
   progressBar.classList.add("visible");
   progressFill.style.width = "0%";
 
+  const t0 = Date.now();
   try {
     const blob = new Blob([selectedVoice.audioData], { type: selectedVoice.audioType || "audio/mpeg" });
     const form = new FormData();
@@ -3346,14 +3410,14 @@ window.generate = async function() {
         } else if (data.msg === "process_completed") {
           progressFill.style.width = "100%";
           if (data.success) {
-            const dur = data.output.duration || 0;
+            const wallSec = (Date.now() - t0) / 1000;
             resultAudioUrl = data.output.data[0].url;
             document.getElementById("audio-player").src = resultAudioUrl;
             document.getElementById("player-title").textContent = text.slice(0, 60) + (text.length > 60 ? "..." : "");
-            document.getElementById("player-meta").textContent = `${selectedVoice.name} · ${dur.toFixed(1)}s · ${text.length} chars`;
+            setPlayerMeta("", selectedVoice.name, `${text.length} chars`);  // prefix="" → uses bare "audio-player"/"player-meta" ids
             result.classList.add("visible");
-            showStatus("success", `Generated in ${dur.toFixed(1)}s`);
-            addToHistory(text, selectedVoice.name, dur, resultAudioUrl);
+            showStatus("success", `Generated in ${wallSec.toFixed(1)}s`);
+            addToHistory(text, selectedVoice.name, wallSec, resultAudioUrl);
           } else {
             const errMsg = data.output?.error || "Generation failed";
             showStatusWithCTA(errMsg);