当前位置：首页 > 文章列表 > 文章 > 前端 > WebSpeechAPI打造智能语音助手教程

WebSpeechAPI打造智能语音助手教程

2025-11-18 17:45:59 0浏览收藏

启用语音识别（SpeechRecognition）

SpeechRecognition 接口允许你捕获用户的语音并将其转换为文本。由于目前主要在 Chrome 浏览器中稳定支持，使用时需注意兼容性。

以下是初始化语音识别的基本步骤：

创建 SpeechRecognition 实例，通常使用 webkitSpeechRecognition 兼容前缀
设置连续监听和实时结果：continuous 和 interimResults
绑定 onresult 事件处理识别到的文本
通过 start() 方法启动识别，stop() 停止

示例代码：

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

recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');

  console.log('识别结果:', transcript);
  processCommand(transcript); // 处理用户指令
};

recognition.start(); // 开始监听

使用语音合成（speechSynthesis）播报回应

speechSynthesis 是 Web Speech API 中用于文本转语音的部分，调用简单且无需额外权限。

关键操作包括：

创建 SpeechSynthesisUtterance 实例，传入要朗读的文本
可选设置语速、音调、语言等属性
调用 speechSynthesis.speak() 播放语音

示例代码：

function speak(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = 'zh-CN'; // 设置中文
  uttervoice.pitch = 1;
  utterance.rate = 1; // 正常语速

  speechSynthesis.speak(utterance);
}

// 调用示例
speak("你好，我是你的语音助手");

整合为智能助手逻辑

将语音识别和合成功能连接起来，形成“听-理解-回应”的闭环。

基本流程如下：

开启语音识别，持续监听用户说话
当识别出完整语句后，分析关键词或使用简单规则匹配指令
根据指令生成回应文本，并通过 speechSynthesis 朗读出来
可加入防重复触发机制，避免连续响应

例如，支持以下指令：

function processCommand(text) {
  text = text.toLowerCase();

  if (text.includes('你好')) {
    speak("你好呀，有什么我可以帮忙的吗？");
  } else if (text.includes('时间')) {
    const now = new Date().toLocaleTimeString();
    speak(`现在的时间是 ${now}`);
  } else if (text.includes('天气')) {
    speak("今天天气晴朗，适合出门。");
  } else {
    speak("抱歉，我没听懂你说什么。");
  }
}