[Bug] AudioClip 播放音频出现“电流音”

[ErHu1993]

描述问题
播放多段音频时，较大概率中间出现电流音；

复现步骤

1、打开官方 DEMO 中的视频剪辑功能；
2、解压并使用下方提供的 demo.mp3（音频播放器试听无电流声）
3、添加3、4段相同的该 MP3 文件到轨道中；
3、从头开始播放，大概率在播放到第3、4段时出现电流音（带耳机），暂停、播放按钮点击瞬间也有电流音
重现问题的步骤：

期望行为

无电流音

环境信息

• 操作系统/浏览器版本: Chrome 133 (最新)
• @Webav [版本：最新]

demo.mp3.zip

[hughfenghen]

试试合成后的效果如何？
合成跟预览播放，机制上有较大区别，预览播放中音频出现 popping 现象是已知的，已知、没修。

[ErHu1993]

合成后无此问题，popping 问题有修复计划吗？或者有没有其他缓解的方案？

[hughfenghen]

低优，先挂起观察，暂无修复计划。
感兴趣的同学可以阅读 VisibleSprite, AVCanvas 相关代码，尝试修复。

[hughfenghen]

兄弟，挂起让别人也看见，不用关

[Dramalf]

我去capcut网页版上试了试同样的音频，他们就没有这个问题，我看看网页源代码，他们似乎是使用AudioWorkletNode来处理音频的，在MDN官网关于AudioBufferSourceNode的描述，也提到了如果播放来自memory中的音频，使用AudioBufferSourceNode；来自disk的音频，使用AudioWorkletNode。不过目前逻辑是都保存到memory中

This interface is especially useful for playing back audio which has particularly stringent timing accuracy requirements, such as for sounds that must match a specific rhythm and can be kept in memory rather than being played from disk or the network. To play sounds which require accurate timing but must be streamed from the network or played from disk, use a AudioWorkletNode to implement its playback.

我之后尝试用AudioWorkletNode来试一试；以及在测试是，我发现就用测试音频，每次convertPCM2AudioSource读取到的chan0Buf.length都可能不一样，有时候1600，有时候1601，这是什么原因

CapCut创建音频有一段逻辑如下：

let audioVolume = 1
          , audioGainNode = null
          , CreateAudioWorkletInMain = function(e, t, r, i) {
            try {
                let n = `
class RingBuffer {

    static getStorageForCapacity(capacity, type) {
        if (!type.BYTES_PER_ELEMENT) {
            throw TypeError("Pass in a ArrayBuffer subclass");
        }
        const bytes = 8 + (capacity + 1) * type.BYTES_PER_ELEMENT;
        return new SharedArrayBuffer(bytes);
    }

    constructor(sab, type) {
        if (type.BYTES_PER_ELEMENT === undefined) {
            throw TypeError("Pass a concrete typed array class as second argument");
        }

        // Maximum usable size is 1<<32 - type.BYTES_PER_ELEMENT bytes in the ring
        // buffer for this version, easily changeable.
        // -4 for the writer ptr (uint32_t offsets)
        // -4 for the read ptr (uint32_t offsets)
        // capacity counts the empty slot to distinguish between full and empty.
        this._type = type;
        this._capacity = (sab.byteLength - 8) / type.BYTES_PER_ELEMENT;
        this.buf = sab;
        this.write_ptr = new Uint32Array(this.buf, 0, 1);
        this.read_ptr = new Uint32Array(this.buf, 4, 1);
        this.storage = new type(this.buf, 8, this._capacity);
    }

    type() {
        return this._type.name;
    }

    push(elements, length, offset = 0) {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        if ((wr + 1) % this._storage_capacity() === rd) {
            // full
            return 0;
        }

        const len = length !== undefined ? length : elements.length;

        const to_write = Math.min(this._available_write(rd, wr), len);
        const first_part = Math.min(this._storage_capacity() - wr, to_write);
        const second_part = to_write - first_part;

        this._copy(elements, offset, this.storage, wr, first_part);
        this._copy(elements, offset + first_part, this.storage, 0, second_part);

        // publish the enqueued data to the other side
        Atomics.store(
            this.write_ptr,
            0,
            (wr + to_write) % this._storage_capacity()
        );

        return to_write;
    }

    writeCallback(amount, cb) {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        if ((wr + 1) % this._storage_capacity() === rd) {
            // full
            return 0;
        }

        const to_write = Math.min(this._available_write(rd, wr), amount);
        const first_part = Math.min(this._storage_capacity() - wr, to_write);
        const second_part = to_write - first_part;

        // This part will cause GC: don't use in the real time thread.
        const first_part_buf = new this._type(
            this.storage.buffer,
            8 + wr * this.storage.BYTES_PER_ELEMENT,
            first_part
        );
        const second_part_buf = new this._type(
            this.storage.buffer,
            8 + 0,
            second_part
        );

        const written = cb(first_part_buf, second_part_buf) || to_write;

        // publish the enqueued data to the other side
        Atomics.store(this.write_ptr, 0, (wr + written) % this._storage_capacity());

        return written;
    }

    writeCallbackWithOffset(amount, cb) {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        if ((wr + 1) % this._storage_capacity() === rd) {
            // full
            return 0;
        }

        const to_write = Math.min(this._available_write(rd, wr), amount);
        const first_part = Math.min(this._storage_capacity() - wr, to_write);
        const second_part = to_write - first_part;

        const written =
            cb(this.storage, wr, first_part, 0, second_part) || to_write;

        // publish the enqueued data to the other side
        Atomics.store(this.write_ptr, 0, (wr + written) % this._storage_capacity());

        return written;
    }

    pop(elements, length, offset = 0) {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        if (wr === rd) {
            return 0;
        }

        const len = length !== undefined ? length : elements.length;
        const to_read = Math.min(this._available_read(rd, wr), len);

        const first_part = Math.min(this._storage_capacity() - rd, to_read);
        const second_part = to_read - first_part;

        this._copy(this.storage, rd, elements, offset, first_part);
        this._copy(this.storage, 0, elements, offset + first_part, second_part);

        Atomics.store(this.read_ptr, 0, (rd + to_read) % this._storage_capacity());

        return to_read;
    }

    clear() {
        // reset read and write buffer
        Atomics.store(this.read_ptr, 0, 0);
        Atomics.store(this.write_ptr, 0, 0);
    }

    empty() {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        return wr === rd;
    }

    full() {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        return (wr + 1) % this._storage_capacity() === rd;
    }

    capacity() {
        return this._capacity - 1;
    }

    availableRead() {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);
        return this._available_read(rd, wr);
    }

    available_read() {
        return this.availableRead();
    }

    availableWrite() {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);
        return this._available_write(rd, wr);
    }

    _available_read(rd, wr) {
        return (wr + this._storage_capacity() - rd) % this._storage_capacity();
    }

    _available_write(rd, wr) {
        return this.capacity() - this._available_read(rd, wr);
    }

    _storage_capacity() {
        return this._capacity;
    }

    _copy(input, offset_input, output, offset_output, size) {
        for (let i = 0; i < size; i++) {
            output[offset_output + i] = input[offset_input + i];
        }
    }
}

class Processor extends AudioWorkletProcessor {
    static get parameterDescriptors() {
        return [];
    }

    constructor(options) {
        super(options);
        const { userData, sab, sampleRate, channelCount } = options.processorOptions;
        this.interleaved = new Float32Array(128 * channelCount);
        this.audio_reader = new RingBuffer(sab, Float32Array);
        this.channelCount = channelCount;
        console.log("worklet init success");
    }

    process(inputs, outputs, parameters) {
        let readSample = 0;

        if (this.audio_reader.availableRead() < this.interleaved.length) {
            this.interleaved.fill(0);
        } else {
            this.audio_reader.pop(this.interleaved, this.interleaved.length, 0);
        }
        const output = outputs[0];
        output.forEach((channel, index) => {
            for (let i = 0; i < channel.length; i++) {
                channel[i] = this.interleaved[i * 2 + index];
            }
        });

        return true;
    }
}

registerProcessor("processor", Processor);
`
                  , o = new Blob([n],{
                    type: "application/javascript"
                })
                  , a = URL.createObjectURL(o);
                void 0 === r && (r = 44100);
                let s = new AudioContext({
                    sampleRate: r
                })
                  , u = s.audioWorklet;
                return globalThis.vesdk_audioContext = s,
                u.addModule(a).then( () => {
                    u.processor = new AudioWorkletNode(s,"processor",{
                        numberOfInputs: 1,
                        numberOfOutputs: 1,
                        outputChannelCount: [i],
                        processorOptions: {
                            userData: e,
                            sab: t,
                            sampleRate: r,
                            channelCount: i
                        }
                    });
                    let n = s.createGain();
                    u.processor.connect(n),
                    n.connect(s.destination),
                    n.gain.value = audioVolume,
                    audioGainNode = n,
                    0 !== e && Module.ccall("TEAudioWorkletInitCallback", "number", ["number", "number"], [e, 0])
                }
                ),
                0
            } catch (t) {
                return 0 !== e && Module.ccall("TEAudioWorkletInitCallback", "number", ["number", "number"], [e, -1]),
                console.error(t),
                -1
            }
        };

[Yuuuk94]

While making a new canvas player using mp4box.js and av-canvas as the foundation, i encountered the issue mentioned above. Fortunately, the shared code helped me get closer to the root of the issue, so I’d like to share what I found.

Our team’s video designers often split a video into more than 50 clips just for a 1–3 minute video. The audio glitch issue occurs not only with standalone audio clips but also with mp4 clips.
From the reference source you provided, I noticed that it uses not only AudioWorkletNode but also WebAssembly. However, in my case, a quick fix was required, so I didn’t have the time to dive into the WebAssembly implementation.
The reason audio glitches occur is that some frames are skipped in the workerTimer for synchronization, which causes sudden gaps in the audio. Alternatively, during clip transitions, the next audio segment may not be filled in time.
When integrating AudioWorklet and applying the attached code, the line this.interleaved.fill(0) ends up repeating the same issue.
In actual use cases like CapCut, where many frame-level cuts are applied, glitches intermittently occur under similar conditions.
So, I ended up adding a fade-out whenever a sudden gap in the audio occurs.
Also, using a workerTimer running at 60 FPS results in fewer glitches. It covers videos with frame rates of 29.97, 30, and 60 FPS well. However, glitches still occur consistently with 59.94 FPS content.

I'd like to share a few more thoughts. Thanks.

// av-canvas.ts

export class AVCanvas {
    // ...
    constructor(
    attchEl: HTMLElement,
    opts: {
      bgColor: string;
    } & IResolution,
  ) {
    // ...
    // createEmptyOscillatorNode(this.#audioCtx).connect(this.#captureAudioDest);
    this.#initAudioWorkletOnce();
    // ...
    const expectFrameTime = 1000 / 60;
   }
   // ...
  #pause() {
    const emitPaused = this.#playState.step !== 0;
    this.#playState.step = 0;
    if (emitPaused) {
      this.#ringBuffer?.clear();
      this.#evtTool.emit("paused");
      this.#audioCtx.suspend();
      this.#audioProcessor?.port.postMessage({
        cmd: "pause_audio_worklet",
      });
      if (this.#ringBuffer) {
        const e = new Float32Array(this.#ringBuffer?.availableRead() || 0);
        this.#ringBuffer?.pop(e, e.length);
      }
    }
  }

  #audioCtx = new AudioContext({
    sampleRate: DEFAULT_AUDIO_CONF.sampleRate,
  });
  #captureAudioDest = this.#audioCtx.createMediaStreamDestination();
  // #playingAudioCache: Set<AudioBufferSourceNode> = new Set();
  #audioProcessor: AudioWorkletNode | null = null;
  #ringBuffer: RingBuffer | null = null;
  #initAudioWorkletOnce = async () => {
    if (this.#audioProcessor) return; // 이미 초기화된 경우 무시

    const blob = new Blob([processorCode], {
      type: "application/javascript",
    });
    const workletURL = URL.createObjectURL(blob);
    await this.#audioCtx.audioWorklet.addModule(workletURL); // or Blob URL

    const capacity =
      DEFAULT_AUDIO_CONF.sampleRate * DEFAULT_AUDIO_CONF.channelCount * 4;
    const sab = RingBuffer.getStorageForCapacity(capacity, Float32Array);
    this.#ringBuffer = new RingBuffer(sab, Float32Array);
    this.#audioProcessor = new AudioWorkletNode(this.#audioCtx, `processor`, {
      numberOfInputs: 1,
      numberOfOutputs: 1,
      outputChannelCount: [DEFAULT_AUDIO_CONF.channelCount],
      processorOptions: {
        sab,
        channelCount: DEFAULT_AUDIO_CONF.channelCount,
        sampleRate: DEFAULT_AUDIO_CONF.sampleRate,
      },
    });
    const gain = this.#audioCtx.createGain();
    this.#audioProcessor.connect(this.#captureAudioDest);
    this.#audioProcessor.connect(gain);
    gain.connect(this.#audioCtx.destination);

    const silentTick = new ConstantSourceNode(this.#audioCtx);
    silentTick.offset.value = 0.0001;
    silentTick.connect(this.#captureAudioDest);
    silentTick.connect(this.#audioCtx.destination);
    silentTick.start();

    this.#audioProcessor?.port.postMessage({
      cmd: "start_audio_worklet",
      sab,
      sampleRate: DEFAULT_AUDIO_CONF.sampleRate,
      channelCount: DEFAULT_AUDIO_CONF.channelCount,
    });
  };

  #render() {
    const cvsCtx = this.#cvsCtx;
    let ts = this.#renderTime;

    const { start, end, step } = this.#playState;
    if (step !== 0) {
      if (start <= ts && ts < end) {
        ts += step;
        this.#updateRenderTime(ts);
      } else {
        this.#pause();
      }
    }
    for (const s of this.#spriteManager.getSprites()) {
      cvsCtx.save();
      const { offset, start } = s.time;
      const renderTime = ts - offset + start;
      const { audio } = s.render(
        cvsCtx,
        renderTime,
        s.type === "video" && this.#opts.doubling
      );
      if (step !== 0) pushPCMToAudioWorklet([audio], this.#ringBuffer!);
      cvsCtx.restore();
    }
    cvsCtx.resetTransform();
  }

  #playState = {
    start: 0,
    end: 0,
    step: 0, // paused state when step equal 0
  };
  play(opts: { start: number; end?: number; playbackRate?: number }) {
  // ...
      const spriteTimes = this.#spriteManager
      .getSprites({ time: false })
      .map((s) => s.time.offset + s.time.duration);
    const end =
      opts.end ??
      (spriteTimes.length > 0 ? Math.max(...spriteTimes) : Infinity);

    if (opts.start >= end || opts.start < 0) {
      throw Error(
        `Invalid time parameter, ${JSON.stringify({ start: opts.start, end })}`,
      );
    }

    this.#updateRenderTime(opts.start);
   this.#evtTool.emit("playing");

    for (const vs of this.#spriteManager.getSprites({ time: false })) {
      const { offset, duration } = vs.time;
      const selfOffset = startTime - offset;
      if (startTime < offset + duration)
        await vs.preFrame(
          0 < selfOffset && selfOffset <= duration ? selfOffset : 0
        );
    }
    this.#playState.start = startTime;
    this.#playState.end = end;
    this.#audioCtx.resume();
    this.#audioProcessor?.port.postMessage({ cmd: "resume_audio_worklet" });
    // 30 -> 60 
    this.#playState.step = (opts?.playbackRate ?? 1) * (1000 / 60) * 1000;
  }
  // ...
  destroy(): void {
    if (this.#destroyed) return;
    this.#destroyed = true;

    this.#audioProcessor?.disconnect();
    this.#audioProcessor = null;
    this.#ringBuffer?.clear();
    this.#ringBuffer = null;
    // AudioContext는 공유되므로 닫지 않음!
    // this.#audioCtx.close();
    this.#captureAudioDest.disconnect();
    this.#evtTool.destroy();
    this.#stopRender();
    this.#cvsEl?.remove();
    this.#clears.forEach((fn) => fn());
    // this.#playingAudioCache.clear();
    this.#spriteManager.destroy();
  }
// ...
}

function pushPCMToAudioWorklet(
  pcmData: Float32Array[][],
  ringBuffer: RingBuffer
) {
  for (const [chan0Buf, chan1Buf] of pcmData) {
    if (!chan0Buf || chan0Buf.length <= 0) continue;
    const interleaved = new Float32Array(chan0Buf.length * 2);
    for (let i = 0; i < chan0Buf.length; i++) {
      interleaved[i * 2] = chan0Buf[i];
      interleaved[i * 2 + 1] = chan1Buf?.[i] ?? chan0Buf[i];
    }

    let offset = 0;
    while (offset < interleaved.length) {
      const availableWrite =
        ringBuffer.availableWrite() / Float32Array.BYTES_PER_ELEMENT;
      const writeLength = Math.min(interleaved.length - offset, availableWrite);

      if (writeLength > 0) {
        const written = ringBuffer.push(
          interleaved.subarray(offset, offset + writeLength),
          writeLength
        );

        offset += written;
      } else {
        break;
      }
    }
  }
  // ...
  destroy(): void {
    if (this.#destroyed) return;
    this.#destroyed = true;

    this.#audioProcessor?.disconnect();
    this.#audioProcessor = null;
    this.#ringBuffer?.clear();
    this.#ringBuffer = null;
    // this.#audioCtx.close();
    this.#captureAudioDest.disconnect();
    this.#evtTool.destroy();
    this.#stopRender();
    this.#cvsEl?.remove();
    this.#clears.forEach((fn) => fn());
    // this.#playingAudioCache.clear();
    this.#spriteManager.destroy();
  }
// ...
}

class RingBuffer {
  _type: Float32ArrayConstructor;
  _capacity: number;
  buf: SharedArrayBuffer;
  write_ptr: Uint32Array<any>;
  read_ptr: Uint32Array<any>;
  storage: Float32Array<SharedArrayBuffer>;

  static getStorageForCapacity(e: number, t: Float32ArrayConstructor) {
    if (!t.BYTES_PER_ELEMENT) throw TypeError("Pass in a ArrayBuffer subclass");
    return new SharedArrayBuffer(8 + (e + 1) * t.BYTES_PER_ELEMENT);
  }
  constructor(e: SharedArrayBuffer, t: Float32ArrayConstructor) {
    if (void 0 === t.BYTES_PER_ELEMENT)
      throw TypeError("Pass a concrete typed array class as second argument");
    this._type = t;
    this._capacity = (e.byteLength - 8) / t.BYTES_PER_ELEMENT;
    this.buf = e;
    this.write_ptr = new Uint32Array(this.buf, 0, 1);
    this.read_ptr = new Uint32Array(this.buf, 4, 1);
    this.storage = new Float32Array(this.buf, 8, this._capacity);
  }
  type() {
    return this._type.name;
  }
  push(e: Float32Array<ArrayBuffer>, t: number, r = 0) {
    const i = Atomics.load(this.read_ptr, 0),
      n = Atomics.load(this.write_ptr, 0);
    if ((n + 1) % this._storage_capacity() === i) return 0;
    const o = void 0 !== t ? t : e.length,
      a = Math.min(this._available_write(i, n), o),
      s = Math.min(this._storage_capacity() - n, a),
      u = a - s;
    return (
      this._copy(e, r, this.storage, n, s),
      this._copy(e, r + s, this.storage, 0, u),
      Atomics.store(this.write_ptr, 0, (n + a) % this._storage_capacity()),
      a
    );
  }
  writeCallback(
    e: number,
    t: (
      s: Float32Array<SharedArrayBuffer>,
      n: Float32Array<SharedArrayBuffer>
    ) => number
  ) {
    const r = Atomics.load(this.read_ptr, 0),
      i = Atomics.load(this.write_ptr, 0);
    if ((i + 1) % this._storage_capacity() === r) return 0;
    const n = Math.min(this._available_write(r, i), e),
      o = Math.min(this._storage_capacity() - i, n),
      a = n - o,
      s = new this._type(
        this.storage.buffer,
        8 + i * this.storage.BYTES_PER_ELEMENT,
        o
      ),
      u = t(s, new this._type(this.storage.buffer, 8, a)) || n;
    return (
      Atomics.store(this.write_ptr, 0, (i + u) % this._storage_capacity()), u
    );
  }
  writeCallbackWithOffset(
    e: number,
    t: (
      s: Float32Array<SharedArrayBuffer>,
      i: number,
      o: number,
      n: number,
      a: number
    ) => number
  ) {
    const r = Atomics.load(this.read_ptr, 0),
      i = Atomics.load(this.write_ptr, 0);
    if ((i + 1) % this._storage_capacity() === r) return 0;
    const n = Math.min(this._available_write(r, i), e),
      o = Math.min(this._storage_capacity() - i, n),
      a = n - o,
      s = t(this.storage, i, o, 0, a) || n;
    return (
      Atomics.store(this.write_ptr, 0, (i + s) % this._storage_capacity()), s
    );
  }
  pop(e: Float32Array<ArrayBuffer>, t: number, r = 0) {
    const i = Atomics.load(this.read_ptr, 0),
      n = Atomics.load(this.write_ptr, 0);
    if (n === i) return 0;
    const o = void 0 !== t ? t : e.length,
      a = Math.min(this._available_read(i, n), o),
      s = Math.min(this._storage_capacity() - i, a),
      u = a - s;
    return (
      this._copy(this.storage, i, e, r, s),
      this._copy(this.storage, 0, e, r + s, u),
      Atomics.store(this.read_ptr, 0, (i + a) % this._storage_capacity()),
      a
    );
  }
  clear() {
    Atomics.store(this.read_ptr, 0, 0), Atomics.store(this.write_ptr, 0, 0);
  }
  empty() {
    const e = Atomics.load(this.read_ptr, 0);
    return Atomics.load(this.write_ptr, 0) === e;
  }
  full() {
    const e = Atomics.load(this.read_ptr, 0);
    return (
      (Atomics.load(this.write_ptr, 0) + 1) % this._storage_capacity() === e
    );
  }
  capacity() {
    return this._capacity - 1;
  }
  availableRead() {
    const e = Atomics.load(this.read_ptr, 0),
      t = Atomics.load(this.write_ptr, 0);
    return this._available_read(e, t);
  }
  available_read() {
    return this.availableRead();
  }
  availableWrite() {
    const e = Atomics.load(this.read_ptr, 0),
      t = Atomics.load(this.write_ptr, 0);
    return this._available_write(e, t);
  }
  _available_read(e: number, t: number) {
    return (t + this._storage_capacity() - e) % this._storage_capacity();
  }
  _available_write(e: number, t: number) {
    return this.capacity() - this._available_read(e, t);
  }
  _storage_capacity() {
    return this._capacity;
  }
  _copy(
    e: Float32Array,
    t: number,
    r: Float32Array<ArrayBuffer>,
    i: number,
    n: number
  ) {
    for (let o = 0; o < n; o++) r[i + o] = e[t + o];
  }
}

const processorCode = `
class RingBuffer {

    static getStorageForCapacity(capacity, type) {
        if (!type.BYTES_PER_ELEMENT) {
            throw TypeError("Pass in a ArrayBuffer subclass");
        }
        const bytes = 8 + (capacity + 1) * type.BYTES_PER_ELEMENT;
        return new SharedArrayBuffer(bytes);
    }

    constructor(sab, type) {
        if (type.BYTES_PER_ELEMENT === undefined) {
            throw TypeError("Pass a concrete typed array class as second argument");
        }

        // Maximum usable size is 1<<32 - type.BYTES_PER_ELEMENT bytes in the ring
        // buffer for this version, easily changeable.
        // -4 for the writer ptr (uint32_t offsets)
        // -4 for the read ptr (uint32_t offsets)
        // capacity counts the empty slot to distinguish between full and empty.
        this._type = type;
        this._capacity = (sab.byteLength - 8) / type.BYTES_PER_ELEMENT;
        this.buf = sab;
        this.write_ptr = new Uint32Array(this.buf, 0, 1);
        this.read_ptr = new Uint32Array(this.buf, 4, 1);
        this.storage = new type(this.buf, 8, this._capacity);
    }

    type() {
        return this._type.name;
    }

    push(elements, length, offset = 0) {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        if ((wr + 1) % this._storage_capacity() === rd) {
            // full
            return 0;
        }

        const len = length !== undefined ? length : elements.length;

        const to_write = Math.min(this._available_write(rd, wr), len);
        const first_part = Math.min(this._storage_capacity() - wr, to_write);
        const second_part = to_write - first_part;

        this._copy(elements, offset, this.storage, wr, first_part);
        this._copy(elements, offset + first_part, this.storage, 0, second_part);

        // publish the enqueued data to the other side
        Atomics.store(
            this.write_ptr,
            0,
            (wr + to_write) % this._storage_capacity()
        );

        return to_write;
    }

    writeCallback(amount, cb) {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        if ((wr + 1) % this._storage_capacity() === rd) {
            // full
            return 0;
        }

        const to_write = Math.min(this._available_write(rd, wr), amount);
        const first_part = Math.min(this._storage_capacity() - wr, to_write);
        const second_part = to_write - first_part;

        // This part will cause GC: don't use in the real time thread.
        const first_part_buf = new this._type(
            this.storage.buffer,
            8 + wr * this.storage.BYTES_PER_ELEMENT,
            first_part
        );
        const second_part_buf = new this._type(
            this.storage.buffer,
            8 + 0,
            second_part
        );

        const written = cb(first_part_buf, second_part_buf) || to_write;

        // publish the enqueued data to the other side
        Atomics.store(this.write_ptr, 0, (wr + written) % this._storage_capacity());

        return written;
    }

    writeCallbackWithOffset(amount, cb) {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        if ((wr + 1) % this._storage_capacity() === rd) {
            // full
            return 0;
        }

        const to_write = Math.min(this._available_write(rd, wr), amount);
        const first_part = Math.min(this._storage_capacity() - wr, to_write);
        const second_part = to_write - first_part;

        const written =
            cb(this.storage, wr, first_part, 0, second_part) || to_write;

        // publish the enqueued data to the other side
        Atomics.store(this.write_ptr, 0, (wr + written) % this._storage_capacity());

        return written;
    }

    pop(elements, length, offset = 0) {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        if (wr === rd) {
            return 0;
        }

        const len = length !== undefined ? length : elements.length;
        const to_read = Math.min(this._available_read(rd, wr), len);

        const first_part = Math.min(this._storage_capacity() - rd, to_read);
        const second_part = to_read - first_part;

        this._copy(this.storage, rd, elements, offset, first_part);
        this._copy(this.storage, 0, elements, offset + first_part, second_part);

        Atomics.store(this.read_ptr, 0, (rd + to_read) % this._storage_capacity());

        return to_read;
    }

    clear() {
        // reset read and write buffer
        Atomics.store(this.read_ptr, 0, 0);
        Atomics.store(this.write_ptr, 0, 0);
    }

    empty() {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        return wr === rd;
    }

    full() {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);

        return (wr + 1) % this._storage_capacity() === rd;
    }

    capacity() {
        return this._capacity - 1;
    }

    availableRead() {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);
        return this._available_read(rd, wr);
    }

    available_read() {
        return this.availableRead();
    }

    availableWrite() {
        const rd = Atomics.load(this.read_ptr, 0);
        const wr = Atomics.load(this.write_ptr, 0);
        return this._available_write(rd, wr);
    }

    _available_read(rd, wr) {
        return (wr + this._storage_capacity() - rd) % this._storage_capacity();
    }

    _available_write(rd, wr) {
        return this.capacity() - this._available_read(rd, wr);
    }

    _storage_capacity() {
        return this._capacity;
    }

    _copy(input, offset_input, output, offset_output, size) {
        for (let i = 0; i < size; i++) {
            output[offset_output + i] = input[offset_input + i];
        }
    }
}

class Processor extends AudioWorkletProcessor {
    static get parameterDescriptors() {
        return [];
    }

    constructor(options) {
        super(options);
        const { sab, channelCount } = options.processorOptions;
        this.interleaved = new Float32Array(128 * channelCount);
        this.audio_reader = new RingBuffer(sab, Float32Array);
        this.channelCount = channelCount;
        console.log("worklet init success");

        this.port.onmessage = (event) => {
            if (event.data.cmd === "pause_audio_worklet") {
                this.audio_reader.clear();
            } 
        };
    }

    process(inputs, outputs, parameters) {
        const output = outputs[0];
        const framesToProcess = output[0].length; // 일반적으로 128 프레임

        const availableSamples = this.audio_reader.availableRead();
        const samplesToPop = Math.min(availableSamples, this.interleaved.length);

        if (samplesToPop > 0) {
            this.audio_reader.pop(this.interleaved, samplesToPop);
        }

        if (samplesToPop < this.interleaved.length) {
            for (let i = samplesToPop; i < this.interleaved.length; i++) {
                this.interleaved[i] = 0;
            }
            for (let i = 0; i < this.interleaved.length; i++) {
                const fadeGain = (Math.cos(Math.PI * (i / (this.interleaved.length - 1))) + 1) / 2;
                this.interleaved[i] *= fadeGain;
            }
        }
        output.forEach((channel, index) => {
            for (let i = 0; i < framesToProcess; i++) {
                channel[i] = this.interleaved[i * this.channelCount + index];
            }
        });

        return true;
    }
}

registerProcessor( "processor", Processor);
`;

// vite.config.ts
export default defineConfig({
  plugins: [
    {
      name: "configure-response-headers",
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          next();
        });
      },
    },
  ],
});