update

fixing garbled sound

src/app/components/Main.tsx

@@ -412,23 +412,43 @@ export default function Main() {
       player.init(sampleRate);
       const reader = stream.getReader();
       let startedNotified = false;
+      // Track the exact moment the AudioContext actually starts playing so the
+      // stop timer is anchored to playback start, not stream-end.
+      let audioStartedAt: number | null = null;
+      const notifyStarted = () => {
+        if (!startedNotified) {
+          startedNotified = true;
+          audioStartedAt = Date.now();
+          onStarted?.();
+        }
+      };
       while (true) {
         const { done, value } = await reader.read();
         if (done) break;
         if (value && value.byteLength > 0) {
           const pcm = value.buffer.slice(value.byteOffset, value.byteOffset + value.byteLength) as ArrayBuffer;
           chunks.push(pcm);
-          player.enqueue(
-            pcm,
-            !startedNotified ? () => { startedNotified = true; onStarted?.(); } : undefined,
-          );
+          player.enqueue(pcm, notifyStarted);
         }
       }
       // Play any remaining buffered audio that didn't reach the threshold (short responses)
-      player.flush(!startedNotified ? () => { startedNotified = true; onStarted?.(); } : undefined);
+      player.flush(notifyStarted);
       const totalBytes = chunks.reduce((acc, c) => acc + c.byteLength, 0);
       const durationMs = (totalBytes / 2 / sampleRate) * 1000;
-      await new Promise<void>((resolve) => setTimeout(resolve, durationMs + 300));
+      // Wait until audio actually starts, then wait for the full playback duration.
+      // Polling in 10ms steps avoids a fixed large buffer while staying responsive.
+      await new Promise<void>((resolve) => {
+        const check = () => {
+          if (audioStartedAt !== null) {
+            const elapsed = Date.now() - audioStartedAt;
+            const remaining = Math.max(0, durationMs - elapsed) + 150;
+            setTimeout(resolve, remaining);
+          } else {
+            setTimeout(check, 10);
+          }
+        };
+        check();
+      });
       player.stopImmediately();
       return { chunks, sampleRate };
     } catch {

src/audio/AudioPlayer.ts

@@ -8,6 +8,9 @@ export class AudioPlayer {
   private pendingBytes = 0;
   private bufferThresholdBytes = 6400; // 200ms at 16kHz default
   private pendingBuffers: AudioBuffer[] = [];
+  // Carries the leftover byte when a chunk has odd byte length, so PCM sample
+  // boundaries stay aligned across chunk splits from the HTTP stream.
+  private leftoverByte: number | null = null;
 
   init(sampleRate = DEFAULT_SAMPLE_RATE): void {
     if (this.context) {
@@ -22,12 +25,34 @@ export class AudioPlayer {
     this.resumed = false;
     this.pendingBytes = 0;
     this.pendingBuffers = [];
+    this.leftoverByte = null;
   }
 
   enqueue(rawPcm: ArrayBuffer, onStarted?: () => void): void {
     if (!this.context) return;
 
-    const int16 = new Int16Array(rawPcm, 0, Math.floor(rawPcm.byteLength / 2));
+    // Prepend any leftover byte from the previous chunk so that Int16 sample
+    // boundaries are always aligned, regardless of how the HTTP stream splits.
+    let pcmBytes: Uint8Array;
+    if (this.leftoverByte !== null) {
+      const combined = new Uint8Array(1 + rawPcm.byteLength);
+      combined[0] = this.leftoverByte;
+      combined.set(new Uint8Array(rawPcm), 1);
+      pcmBytes = combined;
+      this.leftoverByte = null;
+    } else {
+      pcmBytes = new Uint8Array(rawPcm);
+    }
+
+    // If still odd, save the trailing byte for the next chunk.
+    if (pcmBytes.byteLength % 2 !== 0) {
+      this.leftoverByte = pcmBytes[pcmBytes.byteLength - 1];
+      pcmBytes = pcmBytes.slice(0, pcmBytes.byteLength - 1);
+    }
+
+    if (pcmBytes.byteLength === 0) return;
+
+    const int16 = new Int16Array(pcmBytes.buffer, pcmBytes.byteOffset, pcmBytes.byteLength / 2);
     const float32 = new Float32Array(int16.length);
     for (let i = 0; i < int16.length; i++) {
       float32[i] = int16[i] / 32768;
@@ -105,6 +130,7 @@ export class AudioPlayer {
     this.resumed = false;
     this.pendingBytes = 0;
     this.pendingBuffers = [];
+    this.leftoverByte = null;
   }
 }