1. 课程导学与项目初始化：降噪算法前端落地的整体架构

各位同学好，我是这门课的主讲。先聊点实在的——为什么我要开这门课？

几年前我在做一个实时语音社交项目，用户反馈说「你们这破麦，背景噪音比人声还大」。我调了半天 WebRTC 的降噪参数，效果始终不理想。后来一咬牙，把 C 写的噪声抑制算法编译成 WASM，挂到 Web Audio 管线里。效果立竿见影，但踩的坑也够写一本小册子了。

嗯，这门课就是把这些坑填平，让你少走弯路。

1.1 降噪前端落地的整体架构

先看一张整体架构图，帮你建立全局认知。

整个架构分五层，从上到下依次是：

• 音频输入层：麦克风实时流、音频文件、或网络流。我用的是 getUserMedia + MediaStreamSource。
• Web Audio API 管线层：AudioContext 串联输入、处理、输出节点。这是浏览器原生的音频图，延迟低、性能好。
• 核心降噪引擎：WASM 模块，承载算法逻辑。C/C++/Rust 编译成 .wasm，通过 JavaScript 胶水代码调用。
• 可视化层：Canvas 或 WebGL 绘制频谱、波形。方便调试，也提升用户体验。
• 输出层：扬声器播放、录制保存、或推流到远端。

1.2 技术选型：为什么是这三件套？

你可能想问：为什么偏偏选 Web Audio API + WebAssembly + Canvas/WebGL？

我一个个说。

1.3 项目脚手架搭建：Vite + TypeScript

脚手架我用的是 Vite + TypeScript。为什么？

• Vite：开发服务器秒启动，HMR 热更新快，原生 ESM 支持。相比 Webpack，配置少一半。
• TypeScript：类型安全，尤其适合 WASM 胶水代码的接口定义。你想想看，一个 AudioWorkletProcessor 的参数类型错了，排查起来多痛苦。

初始化步骤很简单：

# 创建项目
npm create vite@latest noise-cancel-app -- --template vanilla-ts

# 进入目录
cd noise-cancel-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

项目结构我习惯这样组织：

noise-cancel-app/
├── public/
│   └── wasm/          # 编译好的 .wasm 文件
├── src/
│   ├── audio/         # Web Audio API 相关
│   │   ├── context.ts
│   │   ├── worklet.ts
│   │   └── processor.ts
│   ├── wasm/          # WASM 胶水代码
│   │   ├── loader.ts
│   │   └── bridge.ts
│   ├── visual/        # 可视化模块
│   │   ├── spectrum.ts
│   │   └── waveform.ts
│   ├── utils/         # 工具函数
│   ├── main.ts        # 入口
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

1.4 初始化 AudioContext 与 AudioWorklet

先写一个初始化 AudioContext 的工具函数：

// src/audio/context.ts
export async function createAudioContext(): Promise<AudioContext> {
  const ctx = new AudioContext({
    sampleRate: 16000,        // 16kHz 适合语音降噪
    latencyHint: 'interactive'
  });

  // 浏览器自动播放策略：需要用户交互后恢复
  if (ctx.state === 'suspended') {
    await ctx.resume();
  }

  return ctx;
}

然后注册 AudioWorklet 模块：

// src/audio/worklet.ts
export async function registerNoiseWorklet(ctx: AudioContext) {
  // 注意：worklet 文件路径相对于构建后的根目录
  await ctx.audioWorklet.addModule('/src/audio/processor.ts');
  
  const workletNode = new AudioWorkletNode(ctx, 'noise-processor', {
    processorOptions: {
      wasmPath: '/wasm/noise_suppression.wasm',
      frameSize: 320          // 20ms @ 16kHz
    }
  });

  return workletNode;
}

1.5 加载 WASM 模块

WASM 加载我封装了一个 loader：

// src/wasm/loader.ts
export async function loadWasmModule(wasmPath: string): Promise<WebAssembly.Module> {
  const response = await fetch(wasmPath);
  const bytes = await response.arrayBuffer();
  const module = await WebAssembly.compile(bytes);
  return module;
}

export async function instantiateNoiseSuppression(module: WebAssembly.Module) {
  const importObject = {
    env: {
      memory: new WebAssembly.Memory({ initial: 256 }),
      // 可以注入 JS 回调函数
    }
  };
  const instance = await WebAssembly.instantiate(module, importObject);
  return instance.exports;
}

嗯，这里要注意：WASM 的内存管理是手动的。如果你的算法需要大量临时缓冲区，记得在 importObject 里分配足够的内存。我一开始只给了 64 页（4MB），结果跑 FFT 时直接 OOM。

1.6 本章小结

这一章我们做了三件事：

• 画清了降噪前端落地的五层架构图
• 选定了 Web Audio API + WASM + Canvas/WebGL 的技术栈
• 搭好了 Vite + TypeScript 的项目脚手架，并初始化了 AudioContext 和 WASM 加载器

说白了，地基已经打好了。下一章我们会深入 AudioWorklet 处理器，把 WASM 降噪算法真正挂到音频管线里。到时候你会看到数据是怎么从麦克风流进 WASM，再流出来的。