Build a browser voice agent

// 20 ms @ 24 kHz = 480 samples per frame.
const FRAME = 480;

class CaptureProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this._buf = new Int16Array(FRAME);
    this._n = 0;
  }

  process(inputs) {
    const ch = inputs[0]?.[0];
    if (!ch) return true;
    for (let i = 0; i < ch.length; i++) {
      // clamp then scale: negatives use 0x8000, positives 0x7FFF
      const s = Math.max(-1, Math.min(1, ch[i]));
      this._buf[this._n++] = s < 0 ? s * 0x8000 : s * 0x7fff;
      if (this._n === FRAME) {
        // transfer the ArrayBuffer to avoid a copy
        const out = this._buf.slice();
        this.port.postMessage(out.buffer, [out.buffer]);
        this._n = 0;
      }
    }
    return true;
  }
}

registerProcessor("capture-processor", CaptureProcessor);

const CAP = 24000 * 10; // up to 10 s of buffered audio

class PlaybackProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this._ring = new Float32Array(CAP);
    this._r = 0;
    this._w = 0;
    this.port.onmessage = (e) => {
      if (e.data === "clear") {
        this._r = this._w = 0; // drop everything queued (barge-in)
        return;
      }
      const pcm = new Int16Array(e.data);
      for (let i = 0; i < pcm.length; i++) {
        this._ring[this._w] = pcm[i] / 0x8000; // Int16 → Float32
        this._w = (this._w + 1) % CAP;
      }
    };
  }

  process(_inputs, outputs) {
    const out = outputs[0][0];
    for (let i = 0; i < out.length; i++) {
      out[i] = this._r === this._w ? 0 : this._ring[this._r];
      if (this._r !== this._w) this._r = (this._r + 1) % CAP;
    }
    return true;
  }
}

registerProcessor("playback-processor", PlaybackProcessor);