ref-audio player

index.html

@@ -369,7 +369,17 @@
     transition: all 0.15s;
   }
   .file-drop:hover, .file-drop.drag { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
-  .file-name { font-size: 11px; color: var(--accent-text); margin-top: 4px; }
+  .file-name { font-size: 11px; color: var(--accent-text); margin-top: 4px; grid-column: 1 / -1; }
+
+  /* Reference preview player: small embedded audio to hear the recorded /
+     uploaded clip before rendering. Spans the full ref panel width. */
+  .ref-preview {
+    grid-column: 1 / -1;
+    width: 100%;
+    height: 34px;
+    margin-top: 6px;
+  }
+  .ref-preview.hidden { display: none; }
 
   /* Reference uploader tabs */
   .ref-tabs {
@@ -775,6 +785,7 @@
         </div>
       </div>
       <div class="file-name" id="file-name"></div>
+      <audio class="ref-preview hidden" id="ref-preview" controls preload="metadata"></audio>
     </div>
 
     <div class="advanced" id="advanced">
@@ -808,7 +819,7 @@ const els = {
   advancedToggle: $("advanced-toggle"), advanced: $("advanced"),
   advancedSummary: $("advanced-summary"),
   refSection: $("ref-section"),
-  drop: $("drop"), fileInput: $("file-input"), fileName: $("file-name"),
+  drop: $("drop"), fileInput: $("file-input"), fileName: $("file-name"), refPreview: $("ref-preview"),
   micBtn: $("mic-btn"), micIcon: $("mic-icon"), micState: $("mic-state"), micTime: $("mic-time"),
   sliders: $("sliders"),
   examples: $("examples"),
@@ -890,7 +901,16 @@ els.fileInput.addEventListener("change", (e) => { const f = e.target.files[0]; i
 ["dragenter", "dragover"].forEach(ev => els.drop.addEventListener(ev, (e) => { e.preventDefault(); els.drop.classList.add("drag"); }));
 ["dragleave", "drop"].forEach(ev => els.drop.addEventListener(ev, (e) => { e.preventDefault(); els.drop.classList.remove("drag"); }));
 els.drop.addEventListener("drop", (e) => { const f = e.dataTransfer.files[0]; if (f) setRefFile(f); });
-const setRefFile = (f) => { refFile = f; els.fileName.textContent = `✓ ${f.name}`; };
+let refPreviewUrl = null;
+const setRefFile = (f) => {
+  refFile = f;
+  els.fileName.textContent = `✓ ${f.name}`;
+  // Let the user hear the clip they just recorded / uploaded before rendering.
+  if (refPreviewUrl) URL.revokeObjectURL(refPreviewUrl);
+  refPreviewUrl = URL.createObjectURL(f);
+  els.refPreview.src = refPreviewUrl;
+  els.refPreview.classList.remove("hidden");
+};
 
 // ---------- Microphone recording (MediaRecorder API) ----------
 let mediaRecorder = null;