fix chunk empty audio

src/audio/AudioPlayer.ts

@@ -4,6 +4,7 @@ export class AudioPlayer {
   private context: AudioContext | null = null;
   private nextPlayTime = 0;
   private started = false;
+  private resumed = false;
   private pendingBytes = 0;
   private bufferThresholdBytes = 6400; // 200ms at 16kHz default
   private pendingBuffers: AudioBuffer[] = [];
@@ -18,6 +19,7 @@ export class AudioPlayer {
     this.bufferThresholdBytes = Math.floor(sampleRate * 0.2) * 2; // 200ms
     this.nextPlayTime = 0;
     this.started = false;
+    this.resumed = false;
     this.pendingBytes = 0;
     this.pendingBuffers = [];
   }
@@ -25,7 +27,7 @@ export class AudioPlayer {
   enqueue(rawPcm: ArrayBuffer, onStarted?: () => void): void {
     if (!this.context) return;
 
-    const int16 = new Int16Array(rawPcm);
+    const int16 = new Int16Array(rawPcm, 0, Math.floor(rawPcm.byteLength / 2));
     const float32 = new Float32Array(int16.length);
     for (let i = 0; i < int16.length; i++) {
       float32[i] = int16[i] / 32768;
@@ -36,17 +38,27 @@ export class AudioPlayer {
 
     this.pendingBytes += rawPcm.byteLength;
 
-    if (!this.started) {
+    if (this.resumed) {
+      // AudioContext is running — schedule immediately
+      const source = this.context.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(this.context.destination);
+      source.start(this.nextPlayTime);
+      this.nextPlayTime += audioBuffer.duration;
+    } else {
+      // Still buffering: waiting for threshold or waiting for ctx.resume() to complete
       this.pendingBuffers.push(audioBuffer);
-      if (this.pendingBytes >= this.bufferThresholdBytes) {
+
+      if (!this.started && this.pendingBytes >= this.bufferThresholdBytes) {
         this.started = true;
-        const buffered = this.pendingBuffers.splice(0);
-        this.pendingBuffers = [];
         void this.context.resume().then(() => {
           if (!this.context) return;
+          this.resumed = true;
           this.nextPlayTime = this.context.currentTime;
           onStarted?.();
-          for (const buf of buffered) {
+          const toSchedule = this.pendingBuffers.splice(0);
+          this.pendingBuffers = [];
+          for (const buf of toSchedule) {
             const source = this.context.createBufferSource();
             source.buffer = buf;
             source.connect(this.context.destination);
@@ -55,12 +67,6 @@ export class AudioPlayer {
           }
         });
       }
-    } else {
-      const source = this.context.createBufferSource();
-      source.buffer = audioBuffer;
-      source.connect(this.context.destination);
-      source.start(this.nextPlayTime);
-      this.nextPlayTime += audioBuffer.duration;
     }
   }
 
@@ -74,6 +80,7 @@ export class AudioPlayer {
     this.context = null;
     this.nextPlayTime = 0;
     this.started = false;
+    this.resumed = false;
     this.pendingBytes = 0;
     this.pendingBuffers = [];
   }
@@ -87,7 +94,7 @@ export function replayAudio(
   let nextTime = ctx.currentTime + 0.05;
 
   for (const chunk of chunks) {
-    const int16 = new Int16Array(chunk);
+    const int16 = new Int16Array(chunk, 0, Math.floor(chunk.byteLength / 2));
     const float32 = new Float32Array(int16.length);
     for (let i = 0; i < int16.length; i++) float32[i] = int16[i] / 32768;
     const buf = ctx.createBuffer(1, float32.length, sampleRate);

src/audio/AudioRecorder.ts

@@ -4,7 +4,7 @@ const CHUNK_SAMPLES = 3200; // 100ms at 16kHz
 export class AudioRecorder {
   private context: AudioContext | null = null;
   private stream: MediaStream | null = null;
-  private processor: ScriptProcessorNode | null = null;
+  private workletNode: AudioWorkletNode | null = null;
   private accumulator: Float32Array = new Float32Array(0);
   micLevel = 0;
 
@@ -19,13 +19,16 @@ export class AudioRecorder {
 
     this.context = new AudioContext({ sampleRate: TARGET_SAMPLE_RATE });
     await this.context.resume();
-    const source = this.context.createMediaStreamSource(this.stream);
 
-    // bufferSize 512 → fires every ~32ms at 16kHz; we accumulate to 100ms
-    this.processor = this.context.createScriptProcessor(512, 1, 1);
+    await this.context.audioWorklet.addModule(
+      new URL("./RecorderWorkletProcessor.js", import.meta.url).href
+    );
+
+    const source = this.context.createMediaStreamSource(this.stream);
+    this.workletNode = new AudioWorkletNode(this.context, "recorder-processor");
 
-    this.processor.onaudioprocess = (e) => {
-      const input = e.inputBuffer.getChannelData(0);
+    this.workletNode.port.onmessage = (e: MessageEvent<Float32Array>) => {
+      const input = e.data;
       const combined = new Float32Array(this.accumulator.length + input.length);
       combined.set(this.accumulator);
       combined.set(input, this.accumulator.length);
@@ -51,13 +54,12 @@ export class AudioRecorder {
       }
     };
 
-    source.connect(this.processor);
-    this.processor.connect(this.context.destination);
+    source.connect(this.workletNode);
   }
 
   stop(): void {
-    this.processor?.disconnect();
-    this.processor = null;
+    this.workletNode?.disconnect();
+    this.workletNode = null;
     this.stream?.getTracks().forEach((t) => t.stop());
     this.stream = null;
     this.context?.close();

src/audio/RecorderWorkletProcessor.js

@@ -0,0 +1,12 @@
+class RecorderProcessor extends AudioWorkletProcessor {
+  process(inputs) {
+    const channel = inputs[0]?.[0];
+    if (channel?.length) {
+      const copy = channel.slice();
+      this.port.postMessage(copy, [copy.buffer]);
+    }
+    return true;
+  }
+}
+
+registerProcessor("recorder-processor", RecorderProcessor);