背景与价值

  • 将音频处理从主线程移至 Worklet,避免 UI 任务争用导致的音频卡顿与延迟飙升。

注册处理器


// main.js
await (audioContext as any).audioWorklet.addModule('/processor.js');
const node = new (window as any).AudioWorkletNode(audioContext, 'simple-processor');
node.connect(audioContext.destination);

处理器实现:


// processor.js
class SimpleProcessor extends (globalThis as any).AudioWorkletProcessor {
  static get parameterDescriptors() { return [{ name: 'gain', defaultValue: 1 }]; }
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    const gain = parameters.gain[0];
    for (let ch = 0; ch < output.length; ch++) {
      const channel = output[ch];
      for (let i = 0; i < channel.length; i++) channel[i] *= gain;
    }
    return true; // 继续
  }
}
(globalThis as any).registerProcessor('simple-processor', SimpleProcessor);

验证指标(Chrome 128/Edge 130)

  • 音频延迟(P95):≤ 15ms(处理简单增益/滤波管线)。
  • 掉帧率:≤ 1.5%。
  • UI 干扰:高密度交互下音频稳定,无可感知卡顿。

回退策略

  • 不支持 Worklet:回退到 ScriptProcessorNode(已废弃,谨慎使用)或降低处理复杂度。

测试清单

  • 高频交互与动画并行:音频输出稳定;参数变化实时生效。
  • 设备差异:移动与桌面设备在不同采样率下表现稳定。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部