10分钟上手Web Speech API：打造会说话的AI聊天机器人

花淑云Nell

1085人浏览 · 2025-10-14 04:56:14

花淑云Nell · 2025-10-14 04:56:14 发布

10分钟上手Web Speech API：打造会说话的AI聊天机器人

【免费下载链接】jstips This is about useful JS tips! 项目地址: https://gitcode.com/gh_mirrors/js/jstips

你是否想过让网页拥有"听"和"说"的能力？用户对着麦克风说话，AI即刻回应，无需键盘输入——这不是科幻电影场景，而是通过Web Speech API就能实现的网页交互新范式。本文将带你用100行代码打造一个能听会说的AI聊天机器人，掌握语音交互核心技巧。

技术选型与兼容性准备

Web Speech API包含两大核心模块：

语音识别（SpeechRecognition）：将语音转换为文本
语音合成（SpeechSynthesis）：将文本转换为语音

根据caniuse中的环境检测技巧。

语音识别核心实现

语音识别的实现需要创建SpeechRecognition实例并监听结果事件。以下是基础代码框架：

// 处理浏览器前缀差异
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

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

// 监听识别结果
recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  console.log('你说：', transcript);
  // 发送到AI接口获取回复
  getAIResponse(transcript).then(reply => speak(reply));
};

// 开始识别
document.getElementById('start-btn').addEventListener('click', () => {
  recognition.start();
});

错误处理最佳实践可参考javascript/2017-03-09-working-with-websocket-timeout.md中的异常捕获模式

语音合成实用技巧

语音合成相对简单，但要实现自然流畅的语音效果，需要掌握以下技巧：

function speak(text) {
  // 检查浏览器支持
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text);
    
    // 优化语音参数
    utterance.rate = 1.0; // 语速
    utterance.pitch = 1.2; // 音调
    utterance.volume = 1.0; // 音量
    
    // 选择语音（可选）
    const voices = window.speechSynthesis.getVoices();
    const chineseVoice = voices.find(voice => 
      voice.lang.includes('zh') && voice.name.includes('Chinese')
    );
    if (chineseVoice) utterance.voice = chineseVoice;
    
    window.speechSynthesis.speak(utterance);
  }
}