实时语音转写 + AIGC：Web 端智能交互的技术链路

1. 整体链路鸟瞰

设想一个场景：

• 用户对着麦克风说话 ️
• 浏览器捕获音频流 ️
• 前端通过 WebSocket 将音流推给后端
• 后端接入语音转写服务，生成文字
• 文字送交 AIGC 模型（比如 LLM），生成内容
• 最终再把结果在网页端“活灵活现”地展现 ️

可以浓缩成三句口诀：
采集 → 转写 → 生成 → 展示

麦克风 -> PCM音频流 -> 实时转写 -> 文本 -> AIGC生成 -> 返回网页

2. 麦克风采集：从空气到比特

当人声从喉咙震动飘出，经过空气摩擦掉一半魂魄，剩下的交给浏览器通过 [MediaStream API] 来采集。

关键代码 ‍

// 获取浏览器麦克风流
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

// AudioContext 处理更底层的 PCM
const audioCtx = new AudioContext();
const source = audioCtx.createMediaStreamSource(stream);

在这里，数据其实就是一串浮点数序列（amplitude），就像波浪 ——此时只是人类耳朵能理解的物理现象被转化为数字。

3. 音频传输：让比特乘上高速公路

浏览器端的音频数据需要传送到后台做语音识别。此时两种常用方式：

1. WebSocket：实时性好，适合持续流式传输。
2. WebRTC：点对点低延迟，但配置稍复杂。

WebSocket 示例

const ws = new WebSocket('wss://your-asr-server');
ws.binaryType = 'arraybuffer';

// 持续推送音频数据到后端
processor.onaudioprocess = (event) => {
  const input = event.inputBuffer.getChannelData(0);
  ws.send(float32ToInt16(input));
};

注意点：ASR 模型习惯吃的是 16bit PCM，所以要从 float32 转成 Int16。

4. 实时语音转写：让机器听懂人话

到了后台，语音数据进入 ASR 引擎。
核心步骤：

1. 特征提取：把音频波形转为梅尔频谱特征（相当于从“时域”转到“频域”）。
2. 声学模型：例如基于 Transformer 或 RNN 的深度学习模型，将频谱 → 音素概率。
3. 语言模型：结合上下文，输出最合理的句子。

常见方案：

• 自建开源模型（e.g. Whisper, Wenet）
• 云服务（Azure、Google Speech、阿里、科大讯飞）

说的直白点：机器耳朵听的是噪音里的山水画，ASR 要做的就是 把乱麻理成一条丝线。

5. 对接 AIGC：从文字到灵魂 ️

当得到了用户说的话，接下来丢给 AIGC 模型（大模型）处理。
比如：

• 用户说：“帮我写一段诗歌，关于秋天”
• 系统转写成文本 → LLM 生成一篇小诗 → 返回前端。

示例调用（伪代码）

const response = await aiClient.chatCompletion({
  messages: [{ role: 'user', content: transcribedText }],
});
displayOnPage(response.content);

此处 AIGC 不仅仅能生成文本，还能：

• 生成回答（QA 对话）
• 生成文案、代码片段
• 搭配 TTS 再次转回语音，实现“实时语音对话”

6. Web 前端展示：见字如面

前端负责把结果放出来，可以增添一些交互体验：

• 打字机效果：模拟 GPT 输出时一字一闪的紧迫感。⌨️
• 气泡对话框：像微信一样展示对话，提高亲和度。
• 语音播报：用 SpeechSynthesis API 把结果“读出来”。

const utterance = new SpeechSynthesisUtterance(response.content);
speechSynthesis.speak(utterance);

7. 性能与挑战

1. 延迟控制

   • 单句延迟 > 1 秒就容易让用户觉得“AI 在放空”。
   • 解决：流式转写 + 流式生成。

2. 噪声处理

   • 用户可能在地铁喊话
   • 需用 VAD（Voice Activity Detection）和降噪算法。

3. 跨浏览器兼容

   • Safari、Chrome、Edge 的 Audio API 支持度不一。

8. 总结：未来的对话式 Web

把实时语音转写与 AIGC 融合，Web 端不再只是“动动手指”，而能直接“开口说话”。
这就像是给网页装了耳朵和嘴巴：

• 耳朵用来听你说的。
• 嘴巴负责聪明地回应。

未来的应用场景：

• 在线教育：老师讲课实时转写并总结。
• 智能客服：客户说话，AI 立即理解并答复。
• 协作办公：语音会议实时转写并自动生成会议纪要。

9. 彩蛋类比

• 语音转写引擎 像速记员 ️，一边听一边敲字。
• AIGC 模型 像文学编辑 ，把速记员的文字变得有灵魂。
• Web 前端 像舞台布景 ，把这一切呈现给观众。

于是——舞台灯光亮起，观众就能和机器展开 真正的对话。