HTML5 Web Speech API 简介

HTML5 Web Speech API 提供了浏览器原生的语音识别（SpeechRecognition）和语音合成（SpeechSynthesis）功能，无需依赖第三方插件或库。该 API 分为两个主要模块：

• 语音识别（SpeechRecognition）：将用户的语音转换为文本。
• 语音合成（SpeechSynthesis）：将文本转换为语音输出。

语音识别（SpeechRecognition）

语音识别功能通过 SpeechRecognition 接口实现，可将麦克风捕获的语音实时转换为文本。以下是一个基础实现示例：

// 检查浏览器兼容性
if ('webkitSpeechRecognition' in window) {
  const recognition = new webkitSpeechRecognition();
  recognition.continuous = false; // 是否持续监听
  recognition.interimResults = false; // 是否返回临时结果

  recognition.onstart = () => {
    console.log('语音识别开始');
  };

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

  recognition.onerror = (event) => {
    console.error('识别错误：', event.error);
  };

  recognition.onend = () => {
    console.log('语音识别结束');
  };

  // 启动语音识别
  recognition.start();
} else {
  console.error('当前浏览器不支持语音识别');
}

关键参数说明

• continuous：设置为 true 时持续监听语音，直到手动停止。
• interimResults：设置为 true 时返回临时识别结果（不完整但实时更新）。
• lang：指定语音识别的语言（如 'zh-CN' 或 'en-US'）。

语音合成（SpeechSynthesis）

语音合成功能通过 SpeechSynthesis 接口实现，支持将文本转换为语音播放。以下是一个基础示例：

if ('speechSynthesis' in window) {
  const synthesis = window.speechSynthesis;
  const utterance = new SpeechSynthesisUtterance('你好，这是语音合成测试');

  // 设置语音参数
  utterance.lang = 'zh-CN'; // 语言
  utterance.pitch = 1; // 音高（0-2）
  utterance.rate = 1; // 语速（0.1-10）
  utterance.volume = 1; // 音量（0-1）

  // 播放语音
  synthesis.speak(utterance);

  // 事件监听
  utterance.onend = () => {
    console.log('语音播放结束');
  };
} else {
  console.error('当前浏览器不支持语音合成');
}

关键参数说明

• lang：指定语音合成的语言（如 'zh-CN'）。
• voice：通过 speechSynthesis.getVoices() 获取可用语音列表并选择特定发音人。

兼容性与注意事项

1. 浏览器支持：
   • 语音识别：Chrome、Edge 支持较好，需前缀 webkitSpeechRecognition。
   • 语音合成：主流浏览器均支持，但语音库因操作系统而异。
2. HTTPS 环境：部分浏览器要求语音识别必须在 HTTPS 或本地环境中运行。
3. 用户授权：首次使用需用户授权麦克风权限。

进阶功能

• 自定义词库：通过 SpeechGrammarList 设置语法规则，提升特定词汇识别准确率。
• 多语言切换：动态修改 lang 参数以实现多语言支持。
• 语音反馈：结合语音合成，实现语音交互式应用（如语音助手）。

通过合理组合语音识别与合成功能，可以开发出语音搜索、语音输入、朗读工具等丰富应用场景。