feat: Audio Preview Player — browse and play WAV samples via Web Audio API

Issue: #9 Backend: - GET /api/list-wavs?dir=<path> — lists .wav files in a directory - GET /wavs/<file> — static file serving from ./output/wavs Web UI: - WAV Browser section with path input + Browse button - AudioContext-based playback (zero deps) — progress bar, time display - WAV file grid with Play buttons, active item highlighting Tests: - 3 new tests for handleListWavs (wav files, empty dir, nonexistent dir) - Fix TestFindAkaiutil: add t.Chdir(tmp) so relative path lookups don't accidentally find the repo's third_party/akaiutil/akaiutil binary
2026-06-22 00:01:15 -07:00
parent 120993fb02
commit cf53912a33
6 changed files with 349 additions and 0 deletions
@@ -183,6 +183,129 @@ async function doExtract() {
  }
 }

+// ─── WAV Browser ──────────────────────────────────────────────────
+
+let audioCtx = null;
+let currentSource = null;
+let currentAudioBuffer = null;
+let startTime = 0;
+let pauseOffset = 0;
+let isPlaying = false;
+let animationFrame = null;
+
+document.getElementById('wav-browse-btn').addEventListener('click', browseWavs);
+
+async function browseWavs() {
+  const dir = document.getElementById('wav-dir').value;
+  const list = document.getElementById('wav-list');
+  list.innerHTML = 'Loading...';
+
+  try {
+    const resp = await fetch(`${API}/list-wavs?dir=${encodeURIComponent(dir)}`);
+    const data = await resp.json();
+    if (data.error) {
+      list.innerHTML = '<span class="no-files">Error: ' + data.error + '</span>';
+      return;
+    }
+    if (!Array.isArray(data) || data.length === 0) {
+      list.innerHTML = '<span class="no-files">No WAV files found</span>';
+      return;
+    }
+    list.innerHTML = data.map(f => `
+      <div class="wav-item" data-file="${esc(f)}">
+        <span class="wav-name" title="${esc(f)}">${esc(f)}</span>
+        <button class="wav-play-btn" onclick="playWav('${esc(f)}')">Play</button>
+      </div>
+    `).join('');
+  } catch (e) {
+    list.innerHTML = 'Failed: ' + e.message;
+  }
+}
+
+async function playWav(filename) {
+  if (!audioCtx) {
+    audioCtx = new AudioContext();
+  }
+
+  if (currentSource) {
+    currentSource.stop();
+    currentSource = null;
+  }
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame);
+    animationFrame = null;
+  }
+
+  const nowPlaying = document.getElementById('wav-now-playing');
+  nowPlaying.textContent = 'Loading: ' + filename;
+
+  try {
+    const resp = await fetch(`/wavs/${encodeURIComponent(filename)}`);
+    if (!resp.ok) throw new Error('HTTP ' + resp.status);
+    const arrayBuffer = await resp.arrayBuffer();
+    currentAudioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
+
+    currentSource = audioCtx.createBufferSource();
+    currentSource.buffer = currentAudioBuffer;
+    currentSource.connect(audioCtx.destination);
+
+    currentSource.onended = () => {
+      if (isPlaying) {
+        isPlaying = false;
+        pauseOffset = 0;
+        nowPlaying.textContent = '';
+        document.getElementById('wav-progress-fill').style.width = '0%';
+        document.getElementById('wav-time').textContent = formatTime(0);
+        clearActiveItem();
+      }
+    };
+
+    startTime = audioCtx.currentTime - pauseOffset;
+    currentSource.start(0, pauseOffset);
+    isPlaying = true;
+    pauseOffset = 0;
+
+    nowPlaying.textContent = '▶ ' + filename;
+    setActiveItem(filename);
+    updateProgress();
+  } catch (e) {
+    nowPlaying.textContent = 'Error: ' + e.message;
+  }
+}
+
+function updateProgress() {
+  if (!isPlaying || !currentAudioBuffer) return;
+
+  const elapsed = audioCtx.currentTime - startTime;
+  const duration = currentAudioBuffer.duration;
+  const pct = Math.min((elapsed / duration) * 100, 100);
+
+  document.getElementById('wav-progress-fill').style.width = pct + '%';
+  document.getElementById('wav-time').textContent = formatTime(elapsed);
+
+  if (elapsed < duration) {
+    animationFrame = requestAnimationFrame(updateProgress);
+  }
+}
+
+function formatTime(secs) {
+  const m = Math.floor(secs / 60);
+  const s = Math.floor(secs % 60);
+  return m + ':' + s.toString().padStart(2, '0');
+}
+
+function setActiveItem(filename) {
+  document.querySelectorAll('.wav-item').forEach(el => {
+    el.classList.toggle('playing', el.dataset.file === filename);
+  });
+}
+
+function clearActiveItem() {
+  document.querySelectorAll('.wav-item').forEach(el => {
+    el.classList.remove('playing');
+  });
+}
+
 // ─── Helpers ──────────────────────────────────────────────────────

 function esc(s) {