Web 语音技术全景

音频采集层是整个语音链路的起点，它负责把现实世界中的连续声音信号，转换为计算机可以处理的数字音频数据。

从本质上看，人类的语音是一种连续变化的模拟信号，它由空气分子的振动形成声波传播，这种变化在时间上是连续的，在幅度上也是连续的。但计算机的核心问题在于：它只能处理离散的数字信息，而无法直接表示“无限连续变化”的物理量。无论是存储、计算还是传输，本质上都建立在有限精度的二进制结构之上，因此必须通过“采样”的方式，将连续信号转换为离散数据。

在物理链路上，这一过程首先发生在麦克风内部。当声波进入麦克风时，会推动振膜产生微小振动，这种机械运动会进一步转换为连续变化的模拟电信号（电压变化）。但此时信号仍然是模拟的，计算机依然无法直接处理。

真正的关键一步发生在模拟数字转换器（ADC，Analog-to-Digital Converter）中，它会对连续信号进行三个核心操作：

1. 采样（Sampling）：在固定时间间隔内对信号进行“截取”，例如：每秒 16000 次（16kHz），把连续时间变成离散时间点。
2. 量化（Quantization）：将每个时间点上的模拟幅度映射为有限的数字值，例如 16-bit PCM 中的 -32768 到 32767。
3. 编码（Encoding）：将这些数值按顺序组织为可传输的数据结构，形成连续的音频帧流。

经过这一过程，原本连续的声波信号就被转换为计算机可处理的数字音频流（Digital Audio Stream），在 Web 场景中最常见的底层形式是 PCM 原始数据，或经过压缩后的 Opus 等流式音频格式。

在浏览器环境中，这一过程并不是开发者直接控制硬件完成的，而是由系统音频栈负责完成整个“硬件到软件”的转换链路：声波 → 麦克风振膜 → 模拟电信号 → ADC 转换 → 操作系统音频驱动 → 浏览器音频接口。

当用户授权麦克风权限后，浏览器通过 navigator.mediaDevices.getUserMedia({ audio: true }) 向操作系统申请音频输入能力，操作系统会打开麦克风设备，并将采集到的音频信号经过系统音频栈处理后，以数字音频流的形式交由浏览器。浏览器随后将该音频流抽象为 MediaStream 对象，其中音频已经在底层以固定采样率被分帧处理（frame-based processing），但这一过程对开发者是透明的。开发者通过 Web Audio API 或 MediaStreamTrack 接口对其进行进一步处理（如分析、编码或传输）。

因此，这一层的核心作用是：将现实世界的连续声波，稳定、可靠地转换为浏览器可处理的数字音频流，为后续语音识别与语义理解提供输入基础。

语音识别层是整个语音系统中承接音频输入与语义理解的关键环节，它的核心任务是将音频采集层输出的数字音频流，转换为结构化文本。

从系统链路来看，这一层的输入并不是原始声波，而是经过音频采集层处理后的数字音频数据流（例如 PCM 或 Opus 编码的音频帧）。这些数据本质上是对声音信号在时间维度上的数字化采样结果，以连续的时间片（audio frame）形式不断生成与传输。

ASR 的核心并不是“理解语言”，而是完成一个更基础的映射过程：将音频流所携带的声学信息中隐含的语言结构，通过概率建模还原为最可能的文本序列。

在这一过程中，系统通常会经历几个关键步骤：

1. 声学特征提取：音频帧流首先会被转换为更适合模型处理的特征表示，例如：梅尔频谱（Mel Spectrogram）或频谱图（Spectrogram）。这一过程的本质，是将随时间变化的音频信号转换为“时间 × 频率”的二维结构，使模型能够更稳定地捕捉语音中的变化模式。
2. 声学建模推理：在获得特征表示之后，模型会对每一段音频进行概率判断，推测其更可能对应哪些语言单位，例如：音素（phoneme）或子词（subword）。这一阶段并不是在“翻译整句话”，而是在不断逼近“这段声音像什么”。
3. 语言约束与解码：由于语音信号本身存在噪声、口音差异以及连读现象，仅依赖声学信息往往不够稳定，因此系统通常会引入语言模型或解码策略，对初步结果进行修正，使输出更符合自然语言的表达习惯。
4. 文本输出生成：最终，系统会输出结构化文本结果，从而完成从“连续音频信号”到“离散语言表示”的转换。

在现代 ASR 系统中，这一过程正在逐渐被端到端模型所替代，即直接从音频序列映射到文本序列，中间不再显式拆分声学模型与语言模型，从而在简化结构的同时提升整体鲁棒性。

在 Web 场景中，这一能力通常有两种实现路径：一种是依赖云端服务进行实时推理，另一种是将轻量化模型部署在端侧，通过 WebAssembly 或浏览器运行时完成本地识别。两者的差异主要体现在延迟、成本以及隐私控制等方面。

这一层是语音系统从“识别出文字”走向“理解用户意图”的关键阶段。

如果说语音识别（ASR）解决的是“用户说了什么”，那么这一层要解决的，是更接近系统行为的问题：用户想要系统做什么，以及如何将这一需求映射到具体的业务能力上。

在语音链路中，这一阶段已经脱离了纯粹的信号处理，开始进入“语义建模与系统决策”的范畴。输入不再是音频或声学特征，而是经过 ASR 转换后的结构化文本，但这一层的输出，也不再只是另一段自然语言文本，而是可以直接驱动系统行为的结构化语义结果。

因此，这一层的核心任务并不是“理解句子本身”，而是将自然语言转换为一种系统可执行的中间表达形式，使后续流程能够直接对接具体的业务模块或能力接口，而无需再对文本进行二次解析。

举个简单的例子：

• 用户说：“呃…嗯…帮我那个…查一下明天上海的天气（混合背景噪音）”

• ASR 输出：“帮我查一下明天上海的天气”

• NLP / Logic 层输出：

  {
    "intent": "get_weather",
    "slots": {
      "date": "tomorrow",
      "location": "Shanghai"
    },
    "action": "call_weather_api"
  }

可以看到，这一层的结果已经不再是语言本身，而是一个可以直接进入系统执行链路的结构化对象。在这一过程中，系统不仅完成语义解析，还会根据识别出的意图，将请求映射到具体的能力模块，从而进入后续处理流程。在具体实现中，这一层通常包含几个核心任务：

1. 意图识别：用于判断用户的整体目标，例如：是查询信息、执行操作还是进行对话。例如：“帮我订一张明天去北京的机票”，其意图可能被识别为 book_flight。

2. 实体抽取：用于从文本中提取关键业务信息，例如：时间、地点、对象或数值。例如：在“订一张明天去北京的机票”中，会抽取出 date = tomorrow、destination = Beijing。

3. 对话状态管理：用于维护多轮交互中的上下文信息，使系统能够记住前一轮内容。例如：用户先说“帮我订一张机票”，再说“明天的”，系统仍然能够补全完整语义。

4. 语义到动作映射：这一部分会将解析后的语义结构进一步映射到具体的系统能力或服务接口，例如：API 调用或函数调用，从而决定请求最终由哪个模块执行。例如：

   {
     "function": "createOrder",
     "args": {
       "type": "ticket",
       "date": "2026-02-21",
       "destination": "Beijing"
     }
   }

5. 结构化语义输出：最终，这一层输出的不再是自然语言文本，而是结构化结果（Intent / Slots / Action），供后续业务系统或语音合成模块使用。

在现代 Web 应用中，这一层的边界正在发生变化。随着大模型能力的引入，传统的“意图识别 + 规则系统 + 路由逻辑”正在逐渐被统一的语义理解模型所替代，使系统可以直接从文本生成结构化语义结果，并同时完成能力选择与执行路径规划，从而减少中间解析步骤，让语音交互逐步从“文本驱动系统”演进为“语义驱动系统”。

语音合成层负责将系统生成的文本转化为可播放的语音信号。

从系统链路来看，这一层的输入通常是语义处理层输出的结构化文本或自然语言结果，而输出则是连续的语音波形信号，也就是最终可以被播放设备直接使用的音频数据。

从本质上看，这一过程并不是简单的“文字转语音”，而是一个从离散符号到连续信号的生成过程：系统需要将文本中的语言信息逐步转化为具有时间结构的语音波形，使其不仅能够“被读出来”，还能够表达语气、节奏与情感变化。

举个更贴近实际的例子：

• 输入文本：“明天上海的天气是晴天”
• 系统输出语音：“明天上海的天气是晴天（语气自然上扬）”

在这个过程中，语音并不是直接逐字播放，而是会先被转换为可发音的语言序列，并在不同语境下自动确定更合理的读法与表达方式。

在语音合成的整体流程中，系统通常会经历以下几个关键阶段：

1. 文本规范化与语言解析：系统首先会对输入文本进行处理，将数字、符号和特殊表达转换为标准语言形式，并进一步拆解为发音单元（phoneme）。例如：“2026年”这种表达，由于数字在自然语言中存在多种读法（如“二零二六年”或“两千零二十六年”），系统必须结合上下文先进行规范化处理，使其变成唯一确定的发音路径，否则后续语音生成阶段将无法稳定建模。这一步的本质是消除文本中的歧义，使后续语音生成路径唯一确定。
2. 语音特征建模：在获得语言结构之后，模型会进一步生成语音的“表达方式”，包括：语速、停顿、重音以及语调变化等信息。这一阶段并不是基于规则逐条控制，而是模型根据句子结构与语义重点自动预测得到的。例如：“帮我查一下明天上海的天气”中，“明天”和“上海的天气”通常会被赋予更高的表达权重，而“查一下”则会自然降低语速，从而形成更接近人类表达习惯的语音节奏。该阶段通常生成中间声学表示，例如 Mel 频谱，用于描述语音在时间与频率维度上的变化结构。
3. 声波生成（声码器阶段）：最后一步是将声学特征转换为连续的语音波形，使其可以被音频设备直接播放。该过程通常由声码器（vocoder）完成，其本质是将前面生成的抽象语音特征还原为真实可听的声音信号，使数字化表达最终转化为物理声波输出。

在现代 TTS 系统中，这一流程已经从传统的分阶段拼接式语音合成，逐渐演进为基于神经网络的端到端生成模型，使系统能够直接学习“文本结构 → 语音表达”的整体映射关系，从而提升语音自然度与一致性。

在 Web 场景中，这一能力通常通过云端 API 或端侧轻量模型实现。云端方案通常在语音质量与表达能力上更强，而端侧方案则更强调低延迟与隐私保护，两者在实际系统中根据具体应用场景进行权衡选择。

在工程中，最常见的方式是通过 getUserMedia 获取麦克风输入：

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true
});

这里返回的并不是音频数据本身，而是一个 MediaStream 对象。它本质上是浏览器对麦克风输入的抽象封装，代表一条持续生成音频数据的输入轨道，而不是某一段可以直接使用或传输的音频内容。

因此，这个 stream 不能直接发送给语音识别服务。原因在于网络传输需要的是“离散的数据帧”，而 MediaStream 是浏览器内部的“实时音频管道”，它只负责不断产生音频数据，但并不提供可序列化的输出格式。

在实际工程中，如果要接入语音识别服务，通常需要先把这条音频流“拆出来”，转换为可传输的音频帧数据。这一步一般通过 Web Audio API 或 AudioWorklet 完成：

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);

AudioContext 在这里的作用，是把 MediaStream 接入浏览器的音频处理图（Audio Graph）中，使其进入一个可持续处理的管道。在这个管道里，浏览器会将麦克风输入拆分为连续的音频 buffer，并按固定时间片不断输出。

但需要注意的是，这里的 source 仍然不是最终数据，它只是音频处理图中的一个输入节点。真正可以被发送到后端的，是从这个节点下游不断“取出”的音频帧数据，例如：Float32Array 或 PCM chunk。

在实际实现中，最常见的做法是使用 AudioWorklet 持续捕获音频帧，然后通过 WebSocket 将数据实时发送到语音识别服务：

class PCM extends AudioWorkletProcessor {

  // 每一帧音频都会自动进到这里
  process(inputs) {
    // inputs 是一个二维数组：
    // inputs[0] = 第一个音频输入源
    // inputs[0][0] = 单声道音频数据（Float32Array）
    const input = inputs[0][0];

    // 如果有音频数据
    if (input) {
      // 把这一小段音频数据发送到主线程
      // input 是一帧音频（约10~30ms）
      this.port.postMessage(input);
    }

    // return true = 让这个 processor 一直运行（不断流）
    return true;
  }
}

// 注册一个音频处理器，名字叫 "pcm"
// main.js 里会用这个名字来创建节点
registerProcessor("pcm", PCM);

const socket = new WebSocket("wss://your-asr-service");

// 收到 ASR 返回结果（文本）
socket.onmessage = (e) => {
  // 服务端返回 JSON，比如：{ text: "今天天气很好", type: "final" }
  const data = JSON.parse(e.data);
  console.log("ASR识别结果:", data.text);
};

// 1. 打开麦克风
const stream = await navigator.mediaDevices.getUserMedia({
  audio: true
});

// 2. 创建音频处理环境（Audio Graph系统）
const audioContext = new AudioContext({
  sampleRate: 16000 // ASR常用采样率
});

// 3. 把麦克风接入 AudioContext
const source = audioContext.createMediaStreamSource(stream);

// 4. 加载 AudioWorklet（你刚刚那个PCM处理器）
await audioContext.audioWorklet.addModule("processor.js");

// 5. 创建音频处理节点（连接 PCM processor）
const node = new AudioWorkletNode(audioContext, "pcm");

// 6. 收到音频帧（关键！这里才是“真正数据”）
node.port.onmessage = (e) => {
  // e.data = Float32Array（10~30ms音频片段）
  const pcmChunk = e.data;
  // WebSocket 必须是打开状态才发送
  if (socket.readyState === 1) {
    // 发送的是“二进制音频帧”
    socket.send(pcmChunk);
  }
};

// 7. 连接音频链路（启动流动）
source.connect(node);

// 有些浏览器要求必须 connect 到 destination 才会启动
node.connect(audioContext.destination);

在这个过程中，浏览器并不是一次性提供音频数据，而是持续不断地将麦克风输入拆分为音频帧，并通过 AudioWorklet 推送到应用层。开发者所做的事情，本质上就是从这个持续流动的音频管道中不断获取数据，并转发到语音识别服务。

从整体上看，这一链路可以理解为：浏览器负责构建“音频输入管道”，而开发者负责从管道中提取“可传输的音频帧”，并将其持续发送给外部 ASR 服务，从而实现实时语音识别能力。

在具体实现中，如果是最基础的文件播放，可以直接使用 HTMLAudioElement：

const audio = new Audio("output.mp3");
audio.play();

如果需要更底层的控制能力，例如：对音频进行解码或接入自定义音频处理链路，则通常使用 Web Audio API：

const audioContext = new AudioContext();

const response = await fetch("tts-output.mp3");
const arrayBuffer = await response.arrayBuffer();

const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();

在更复杂的实时语音系统中，音频数据通常不会以完整文件形式存在，而是以流式数据持续输入播放管道，浏览器则通过 AudioContext 构建的 Audio Graph 将其实时输出，从而实现低延迟的语音播放能力。

在这种模式下，TTS 服务通常会通过 WebSocket 或 HTTP chunked response 持续返回音频数据（例如 PCM 或 Opus 分片），浏览器则需要一边接收、一边解码、一边播放：

const audioContext = new AudioContext({ sampleRate: 24000 });

// 创建播放节点（用于连续写入音频数据）
const bufferQueue = [];

// 当前播放时间基准
let nextTime = audioContext.currentTime;

// WebSocket 接收 TTS 流式音频
const socket = new WebSocket("wss://your-tts-stream");

socket.binaryType = "arraybuffer";

socket.onmessage = async (event) => {
  const arrayBuffer = event.data;

  // 假设服务端返回的是 PCM Float32 或可解码音频块
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer.slice(0));

  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;

  // 关键：保证音频连续播放（避免断裂）
  source.connect(audioContext.destination);

  // 排队播放
  if (nextTime < audioContext.currentTime) {
    nextTime = audioContext.currentTime;
  }

  source.start(nextTime);
  nextTime += audioBuffer.duration;
};

用于将用户语音直接转换为文本，浏览器内部会自动完成：

• 音频采集
• 语音识别模型推理
• 文本结果输出

开发者只需监听结果事件，即可获取识别后的文本内容。

<button id="start">开始语音识别</button>
<button id="stop">停止</button>

<div id="output"></div>

<script>
function initASR() {
  const SpeechRecognition =
    window.SpeechRecognition || window.webkitSpeechRecognition;

  if (!SpeechRecognition) {
    console.warn("浏览器不支持语音识别");
    return;
  }

  const recognition = new SpeechRecognition();

  recognition.lang = "zh-CN";
  recognition.interimResults = true;
  recognition.continuous = false;

  const output = document.getElementById("output");
  const startBtn = document.getElementById("start");
  const stopBtn = document.getElementById("stop");

  if (!output || !startBtn || !stopBtn) return;

  recognition.onresult = (event) => {
    let text = "";

    for (let i = event.resultIndex; i < event.results.length; i++) {
      text += event.results[i][0].transcript;
    }

    output.innerText = text;
  };

  startBtn.onclick = () => {
    output.innerText = "正在识别...";
    recognition.start();
  };

  stopBtn.onclick = () => {
    recognition.stop();
  };
}

/* 初始化 */
initASR();

</script>

开始语音识别 停止

用于将文本转换为语音播放，浏览器内部会自动完成：

• 文本解析
• 音色选择
• 语音生成
• 音频播放

开发者只需传入文本，即可触发语音输出。

<input id="text" value="你好，这是语音合成测试" />
<button id="speak">播放语音</button>

<script>
function initTTS() {
  const input = document.getElementById("text");
  const btn = document.getElementById("speak");

  if (!input || !btn) return;

  btn.onclick = () => {
    const text = input.value;
    if (!text) return;

    speechSynthesis.cancel();

    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = "zh-CN";
    utterance.rate = 1;
    utterance.pitch = 1;

    speechSynthesis.speak(utterance);
  };
}

initTTS();

</script>