Mic recording option on every audio input (Voice Changer src/tgt, Isolator, Transcribe)

index.html

@@ -2099,6 +2099,7 @@ function handleTranscribeFile(file) {
   transcribeUpload.classList.add("has-file");
   transcribeBtn.disabled = false;
 }
+attachAudioInput("transcribe", handleTranscribeFile);
 
 window.transcribe = async function() {
   if (!transcribeFile) return;
@@ -2791,6 +2792,109 @@ function wireUploadArea(areaId, inputId, labelId, onFile) {
   });
 }
 
+// ── Per-input audio recording (mic alternative on every audio upload) ──
+
+const inputRecorders = {};       // prefix -> { mediaRecorder, stream, chunks, timerInterval, startTime }
+const inputRecordHandlers = {};  // prefix -> (file) => void
+
+window.setInputMode = function(prefix, mode) {
+  document.querySelectorAll(`.audio-source-tabs[data-input-prefix="${prefix}"] .audio-source-tab`)
+    .forEach(t => t.classList.toggle("active", t.dataset.mode === mode));
+  const upload = document.getElementById(`${prefix}-upload`);
+  if (upload) upload.style.display = mode === "upload" ? "" : "none";
+  const recordPane = document.getElementById(`${prefix}-record-pane`);
+  if (recordPane) recordPane.style.display = mode === "record" ? "" : "none";
+  // Optional library pane (Voice Changer target only, added later)
+  const libraryPane = document.getElementById(`${prefix}-library-pane`);
+  if (libraryPane) libraryPane.style.display = mode === "library" ? "" : "none";
+};
+
+window.toggleInputRecord = async function(prefix) {
+  const btn = document.getElementById(`${prefix}-record-btn`);
+  const hint = document.getElementById(`${prefix}-hint`);
+  const r = inputRecorders[prefix];
+  if (r && r.mediaRecorder && r.mediaRecorder.state === "recording") {
+    r.mediaRecorder.stop();
+    return;
+  }
+  if (!navigator.mediaDevices?.getUserMedia) { hint.textContent = "Recording not supported in this browser"; return; }
+  let stream;
+  try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); }
+  catch { hint.textContent = "Microphone access denied"; return; }
+  const mimeType = pickRecorderMimeType();
+  const mr = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
+  const chunks = [];
+  mr.ondataavailable = e => { if (e.data?.size) chunks.push(e.data); };
+  const startTime = Date.now();
+  const timerInterval = setInterval(() => {
+    const e = Math.floor((Date.now() - startTime) / 1000);
+    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 = () => {
+    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);
+  };
+  hint.textContent = "Recording… click again to stop";
+  btn.classList.add("recording");
+  mr.start();
+};
+
+// Attach an Upload/Record toggle around an existing .upload-area
+function attachAudioInput(prefix, onFile, opts = {}) {
+  const uploadId = opts.uploadId || `${prefix}-upload`;
+  const area = document.getElementById(uploadId);
+  if (!area) return;
+  inputRecordHandlers[prefix] = onFile;
+
+  const extraTab = opts.includeLibrary ? `
+    <button class="audio-source-tab" data-mode="library" type="button" onclick="setInputMode('${prefix}', 'library')">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+      Library
+    </button>` : "";
+
+  area.insertAdjacentHTML("beforebegin", `
+    <div class="audio-source-tabs" data-input-prefix="${prefix}">
+      <button class="audio-source-tab active" data-mode="upload" type="button" onclick="setInputMode('${prefix}', 'upload')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        Upload
+      </button>
+      <button class="audio-source-tab" data-mode="record" type="button" onclick="setInputMode('${prefix}', 'record')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="22"/></svg>
+        Record
+      </button>
+      ${extraTab}
+    </div>
+  `);
+
+  area.insertAdjacentHTML("afterend", `
+    <div id="${prefix}-record-pane" style="display:none;margin-bottom:16px">
+      <div class="record-pane">
+        <button class="record-mic-btn" id="${prefix}-record-btn" type="button" onclick="toggleInputRecord('${prefix}')">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="22"/></svg>
+        </button>
+        <div class="record-meta">
+          <div class="record-timer" id="${prefix}-timer">0:00</div>
+          <div class="record-hint" id="${prefix}-hint">Click to record · 5-30s recommended</div>
+        </div>
+      </div>
+      <audio id="${prefix}-preview-audio" controls style="display:none;width:100%;margin-top:10px;border-radius:8px"></audio>
+    </div>
+  `);
+}
+
 function setupPlayer(prefix) {
   const el = document.getElementById(`${prefix}-audio-player`);
   el.addEventListener("play", () => {
@@ -2913,6 +3017,8 @@ function updateVcBtn() {
 }
 wireUploadArea("vc-source-upload", "vc-source-input", "vc-source-label", f => { vcSource = f; updateVcBtn(); });
 wireUploadArea("vc-target-upload", "vc-target-input", "vc-target-label", f => { vcTarget = f; updateVcBtn(); });
+attachAudioInput("vc-source", f => { vcSource = f; document.getElementById("vc-source-label").textContent = f.name; document.getElementById("vc-source-upload").classList.add("has-file"); updateVcBtn(); });
+attachAudioInput("vc-target", f => { vcTarget = f; document.getElementById("vc-target-label").textContent = f.name; document.getElementById("vc-target-upload").classList.add("has-file"); updateVcBtn(); });
 setupPlayer("vc");
 
 window.voiceChange = async function() {
@@ -2968,6 +3074,12 @@ wireUploadArea("iso-upload", "iso-file-input", "iso-upload-label", f => {
   isoFile = f;
   document.getElementById("iso-btn").disabled = false;
 });
+attachAudioInput("iso", f => {
+  isoFile = f;
+  document.getElementById("iso-upload-label").textContent = f.name;
+  document.getElementById("iso-upload").classList.add("has-file");
+  document.getElementById("iso-btn").disabled = false;
+});
 setupPlayer("iso");
 
 window.voiceIsolate = async function() {