一、SpeechRecognition API 概述

SpeechRecognition API 是 Web Speech API 的核心组件之一，允许开发者通过浏览器原生接口实现语音到文本的转换。该接口无需依赖第三方服务，直接调用浏览器内置的语音识别引擎（如 Chrome 的 Google 语音识别服务），支持实时转录、多语言识别及事件驱动交互。其优势在于：

跨平台兼容性：主流浏览器（Chrome、Edge、Firefox、Safari）均支持，但需注意 Safari 对部分功能的限制。
低延迟实时处理：通过 onresult 事件实时返回识别结果，适合需要即时反馈的场景。
隐私友好：数据在浏览器端处理，减少敏感信息外泄风险。

1.1 基础语法与初始化

使用前需通过 window.SpeechRecognition（Chrome/Edge）或 window.webkitSpeechRecognition（Safari）创建实例：

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

关键配置项包括：

lang：设置识别语言（如 'zh-CN' 中文、'en-US' 英文）。
interimResults：布尔值，控制是否返回临时结果（实时草稿）。
continuous：布尔值，控制是否持续监听（结束时自动重启）。

示例配置：

recognition.lang = 'zh-CN';
recognition.interimResults = true;
recognition.continuous = false; // 单次识别后停止

二、核心事件处理

SpeechRecognition 通过事件驱动实现交互，主要事件包括：

2.1 `onresult`：识别结果回调

当语音被识别时触发，返回包含最终结果和临时结果的 SpeechRecognitionEvent 对象：

recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0].transcript)
    .join('');
  console.log('识别结果:', transcript);
};

临时结果处理：若 interimResults 为 true，可通过 result.isFinal 判断是否为最终结果。
多结果选择：event.results 包含所有识别候选，可通过 result[i].confidence 获取置信度（部分浏览器支持）。

2.2 `onerror`：错误处理

捕获识别过程中的错误（如网络问题、权限拒绝）：

recognition.onerror = (event) => {
  console.error('识别错误:', event.error);
  if (event.error === 'not-allowed') {
    alert('请允许麦克风权限！');
  }
};

常见错误码：

not-allowed：用户拒绝麦克风权限。
no-speech：未检测到语音输入。
aborted：用户主动停止识别。

2.3 `onend` 与 `onstart`：生命周期控制

onstart：麦克风开始录音时触发。
onend：识别结束时触发（包括正常结束和错误终止）。

示例：

recognition.onstart = () => console.log('开始录音...');
recognition.onend = () => console.log('识别结束');

三、完整实现流程

3.1 权限请求与按钮控制

通过按钮触发识别，并处理用户权限：

<button id="startBtn">开始识别</button>
<div id="output"></div>
<script>
  const startBtn = document.getElementById('startBtn');
  const output = document.getElementById('output');
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  recognition.lang = 'zh-CN';
  recognition.interimResults = true;
  startBtn.addEventListener('click', () => {
    recognition.start();
    output.textContent = '正在聆听...';
  });
  recognition.onresult = (event) => {
    let interimTranscript = '';
    let finalTranscript = '';
    for (let i = event.resultIndex; i < event.results.length; i++) {
      const transcript = event.results[i][0].transcript;
      if (event.results[i].isFinal) {
        finalTranscript += transcript;
      } else {
        interimTranscript += transcript;
      }
    }
    output.innerHTML = `
      <p>临时结果: ${interimTranscript}</p>
      <p>最终结果: ${finalTranscript}</p>
    `;
  };
  recognition.onerror = (event) => {
    output.textContent = `错误: ${event.error}`;
  };
</script>

3.2 高级功能扩展

3.2.1 动态语言切换

根据用户选择动态修改识别语言：

const langSelect = document.getElementById('langSelect');
langSelect.addEventListener('change', () => {
  recognition.lang = langSelect.value;
});

3.2.2 持续识别模式

通过 continuous: true 实现长语音识别（如会议记录）：

recognition.continuous = true;
recognition.onend = () => {
  console.log('自动重启识别...');
  recognition.start(); // 避免因超时停止
};

3.2.3 置信度过滤

过滤低置信度结果（需浏览器支持）：

recognition.onresult = (event) => {
  const results = event.results;
  for (let i = 0; i < results.length; i++) {
    const result = results[i][0];
    if (result.confidence > 0.7) { // 置信度阈值
      console.log('可靠结果:', result.transcript);
    }
  }
};

四、兼容性与优化建议

4.1 浏览器兼容性处理

使用特性检测确保兼容性：

if (!('SpeechRecognition' in window) && !('webkitSpeechRecognition' in window)) {
  alert('您的浏览器不支持语音识别，请使用 Chrome/Edge/Firefox！');
}

4.2 性能优化

防抖处理：避免频繁启动识别。
资源释放：识别完成后调用 recognition.stop()。
错误重试：网络错误时自动重试。

4.3 安全与隐私

明确告知用户麦克风使用目的。
避免在识别结果中存储敏感信息。
使用 HTTPS 确保数据传输安全。

五、实际应用场景

语音搜索：替代传统输入框，提升移动端体验。
无障碍工具：帮助视障用户操作网页。
实时字幕：为视频会议或直播提供字幕支持。
教育应用：语音答题或口语练习评分。

六、总结与展望

JavaScript 的 SpeechRecognition API 为网页端语音交互提供了高效、低门槛的解决方案。通过合理配置事件和参数，开发者可快速实现从简单指令识别到复杂长语音转录的功能。未来，随着浏览器对 Web Speech API 的持续优化，语音识别将在更多场景中替代传统输入方式，成为人机交互的重要入口。

实践建议：

从简单功能入手，逐步扩展复杂场景。
始终处理错误事件，提升用户体验鲁棒性。
结合 Web Speech API 的语音合成（SpeechSynthesis）实现双向交互。

深入解析：使用 JavaScript 的 SpeechRecognition API 实现语音识别