1. 语音识别概述：从声波到指令的进化之路

语音识别，说白了就是让机器听懂人话。我刚开始接触这个领域时，觉得它离前端很远——直到我在一个智能家居项目里，被要求用浏览器实现语音控制灯光。嗯，从那以后我就再也不敢小看这个技术了。

这一章，我们先把语音识别的全貌看清楚。我会从技术发展史讲起，再聊聊它到底能用在哪儿，最后落到前端的技术选型上。你想想看，搞清楚了这些，后面写代码时才不会走偏。

1.1 语音识别技术发展史：三个关键阶段

语音识别不是突然冒出来的技术。它走了将近70年，才从实验室走进浏览器。我个人习惯把这段历史分成三个阶段来看：

阶段	时间	核心方法	代表成果
模板匹配时代	1950s - 1980s	动态时间规整（DTW）	IBM Shoebox（能识别16个英文单词）
统计建模时代	1980s - 2010s	隐马尔可夫模型（HMM）+ 高斯混合模型（GMM）	Dragon NaturallySpeaking、早期电话语音系统
深度学习时代	2010s - 至今	端到端神经网络（RNN-T、Transformer、Conformer）	Google Assistant、Siri、Whisper

为什么深度学习能赢？因为它不再需要人工设计声学特征。传统方法要手动提取MFCC（梅尔频率倒谱系数），而神经网络可以直接从原始波形里学出规律。你想想看，这就像让厨师自己种菜，而不是去菜市场挑——虽然过程更复杂，但上限高得多。

1.2 应用场景：语音识别到底能干什么

我在项目中遇到过不少客户，他们觉得语音识别就是「对着手机说句话」。其实远不止这些。我挑三个最典型的场景来说：

智能家居

• 场景：用户说「打开客厅灯」，设备执行指令
• 技术要点：需要本地唤醒词（如「小爱同学」）+ 云端识别
• 前端角色：Web端控制面板、语音指令可视化反馈

车载语音

• 场景：驾驶中说出「导航到公司」，系统自动规划路线
• 技术要点：强噪声环境下的识别、离线能力
• 前端角色：HMI（人机界面）中的语音交互组件

医疗领域

• 场景：医生口述病历，系统自动转写为结构化文本
• 技术要点：专业术语识别、高准确率要求（99%+）
• 前端角色：实时转写编辑器、术语纠错界面

这三个场景对前端的要求完全不同。智能家居看重响应速度，车载看重离线能力，医疗看重准确率。你想想看，选技术栈的时候，必须先把场景定下来。

1.3 前端技术栈选型：Web Speech API vs 第三方SDK

好了，到了最实际的部分。作为前端工程师，我们到底用什么来实现语音识别？目前主流就两条路：

对比维度	Web Speech API	第三方SDK（如百度、阿里、讯飞）
使用成本	免费，浏览器内置	按调用量收费，通常有免费额度
准确率	中等（约85-90%，依赖浏览器厂商）	高（约95-98%，专业优化）
离线能力	部分浏览器支持（Chrome可离线）	通常需要联网，部分SDK提供离线包
自定义能力	极低，无法定制语言模型	高，可添加热词、自定义词库
浏览器兼容性	仅Chrome、Edge、Safari（部分）	所有现代浏览器（通过JS SDK）

来看一个最简单的Web Speech API示例：

// 创建识别实例
const recognition = new webkitSpeechRecognition();

// 配置参数
recognition.lang = 'zh-CN';        // 中文
recognition.continuous = false;    // 单次识别
recognition.interimResults = true; // 返回中间结果

// 监听结果
recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  console.log('识别结果：', transcript);
};

// 开始识别
recognition.start();

这段代码看着简单，但坑不少。我曾经在项目里遇到一个问题：用户说完话后，识别结果迟迟不出来。后来发现是continuous设为true后，浏览器一直在等用户继续说，不会自动结束。嗯，这里要注意——单次识别一定要把continuous设为false。

第三方SDK的用法大同小异，但多了鉴权和网络请求的步骤。以百度语音识别为例：

// 初始化SDK（需要先引入百度语音JS SDK）
const client = new BaiduSpeechClient({
  appId: '你的AppId',
  apiKey: '你的ApiKey',
  secretKey: '你的SecretKey'
});

// 开始识别
client.start({
  onStart: () => console.log('开始识别'),
  onResult: (result) => {
    console.log('识别结果：', result.text);
  },
  onError: (error) => {
    console.error('识别失败：', error);
  }
});

1.4 本章知识体系总览

为了让你对整个章节的结构有个直观印象，我画了一张图：

这张图把本章的核心脉络串起来了。你从「语音识别概述」出发，先了解历史（知道来路），再看场景（知道去向），最后落到技术选型（知道怎么干）。后面的章节，我们会沿着这个框架一步步深入。