SonicForgeStudio/app/static/js/sf-fx-realtime.js

// sf-fx-realtime.js — AudioWorkletProcessor nối WebAudio → SHM FX engine.
// process() gom 128-sample quantum thành block 256 stereo float32 (khớp
// FXRT_BLOCK trong FxRealtimeIPC.h) → postMessage cho main thread gửi WS;
// nhận block đã xử lý từ main thread → queue → phát ra output. Queue rỗng →
// zero fill (WS chưa kịp round-trip).
//
// BURST (fix lag/giật/crackle): gom 4 block (1024 mẫu) vào 1 frame rồi post.
// Bridge VST3 (fx_vst_bridge) chạy chậm hơn realtime khi take=1 (256 mẫu:
// ~5.5ms/call > budget 5.33ms → 179/s < 187.5/s → engine drop input →
// crackle). Gửi burst 4 block → bridge take=4 → 1 call process 1024 mẫu
// (amortize overhead: 14-19ms/4 block ≈ 3.5-4.75ms/block) → đủ 187.5/s.
// Latency thêm ~4 block (~21ms) — worklet outQueue 32 block hấp thụ.
//
// FILL (hết crackle do jitter): không phát ngay khi có block đầu — chờ queue
// ≥ FILL (8 block ~43ms @48k) rồi mới phát. Engine gửi ASAP (không pace
// realtime) → client tích lũy buffer an toàn; mọi jitter (bridge process VST
// biến thiên, GC, WS, main thread rAF) bị hấp thụ bởi FILL thay vì queue ≈1
// → cạn → zero-fill. Underrun (queue cạn khi đang phát) → re-buffer: im lặng
// chờ đủ FILL rồi phát tiếp (1 lần gián đoạn thay vì zero-fill liên tục).
// Cap 32 block (~170ms) chặn overflow khi bridge nhanh hơn realtime.
// ponytail: thay drop/rebuffer bằng adaptive stretch khi cần chất lượng cao.
class SfFxRealtimeProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.BLOCK = 256;          // FXRT_BLOCK
    this.BURST = 4;            // số block gom 1 frame (bridge batch)
    this.FILL = 16;             // 16 block ~86ms: buffer khởi đầu — hấp thụ jitter main-thread (GUI decode, rAF, solo restart)
    this.REBUFFER = 2;          // 2 block ~11ms: sau underrun chỉ cần bấy nhiêu để phát lại — gap ngắn, không còn 86ms im lặng
    this.CAP = 32;             // cap queue chặn overflow
    this.bufLen = this.BLOCK * this.BURST;
    this.inL = new Float32Array(this.bufLen);
    this.inR = new Float32Array(this.bufLen);
    this.inCount = 0;
    this.outQueue = [];        // [{l: Float32Array, r: Float32Array}]
    this.outPos = 0;
    this.playing = false;      // false → im lặng (đang chờ đủ FILL)
    this.hasStarted = false;   // đã phát block đầu chưa — phân biệt FILL khởi đầu vs REBUFFER sau underrun
    this.FADE = 512;           // fade-in 512 mẫu (~11ms @48k) khi bắt đầu phát/resume — hết click
    this.outGain = 0;          // gain phát hiện tại (0→1 trong fade)
    this.fadeLeft = 0;         // số mẫu còn lại của fade
    this.port.onmessage = (e) => {
      const d = e.data;
      if (d && d.type === 'set_param') { this.port.postMessage(d); return; }
      if (!d || d.type !== 'out' || !d.l || !d.r) return;
      this.outQueue.push({ l: d.l, r: d.r });
      while (this.outQueue.length > this.CAP) this.outQueue.shift();
    };
  }
  process(inputs, outputs) {
    const input = inputs[0];
    const output = outputs[0];
    const n = output[0] ? output[0].length : 128;
    const outL = output[0];
    const outR = output[1];

    // Góp input thành burst 4 block (1024 mẫu) → gửi main thread
    // (transferable buffer). Main thread tách 4 WS frame → bridge batch 4.
    if (input && input[0]) {
      const inL = input[0];
      const inR = input[1] || input[0];
      for (let i = 0; i < n; i++) {
        if (this.inCount < this.bufLen) {
          this.inL[this.inCount] = inL[i];
          this.inR[this.inCount] = inR[i];
        }
        this.inCount++;
        if (this.inCount >= this.bufLen) {
          const inter = new Float32Array(this.bufLen * 2);
          for (let j = 0; j < this.bufLen; j++) {
            inter[j * 2] = this.inL[j];
            inter[j * 2 + 1] = this.inR[j];
          }
          this.port.postMessage({ type: 'in', data: inter.buffer }, [inter.buffer]);
          this.inCount = 0;
        }
      }
    }

    // Phát output: im lặng tới khi queue ≥ FILL; queue cạn khi đang phát
    // (underrun) → im lặng chờ đủ FILL (re-buffer) thay vì zero-fill liên tục.
    for (let i = 0; i < n; i++) {
      if (this.playing && this.outQueue.length === 0) this.playing = false;
      if (!this.playing) {
        // Khởi đầu: chờ đủ FILL (hấp thụ jitter). Sau underrun: chỉ cần
        // REBUFFER (2 block ~11ms) — gap ngắn thay vì 86ms im lặng.
        const need = this.hasStarted ? this.REBUFFER : this.FILL;
        if (this.outQueue.length >= need) {
          this.playing = true;
          this.hasStarted = true;
          // Fade-in mượt (hết click lúc FILL xong / resume sau underrun); báo
          // main thread để crossfade dry→fx đúng thời điểm.
          this.outGain = 0;
          this.fadeLeft = this.FADE;
          this.port.postMessage({ type: 'started' });
        } else {
          outL[i] = 0;
          if (outR) outR[i] = 0;
          continue;
        }
      }
      const blk = this.outQueue[0];
      if (this.fadeLeft > 0) {
        this.outGain = Math.min(1, this.outGain + 1 / this.FADE);
        this.fadeLeft--;
      }
      outL[i] = blk.l[this.outPos] * this.outGain;
      if (outR) outR[i] = blk.r[this.outPos] * this.outGain;
      this.outPos++;
      if (this.outPos >= this.BLOCK) {
        this.outQueue.shift();
        this.outPos = 0;
      }
    }
    return true;
  }
}

registerProcessor('sf-fx-realtime', SfFxRealtimeProcessor);