如何利用 Web Speech API 实现一个支持语音输入和合成的智能助手？-js教程-PHP中文网

如何利用 Web Speech API 实现一个支持语音输入和合成的智能助手？

夢幻星辰

发布： 2025-10-01 16:26:02

原创

209人浏览过

答案：Web Speech API通过SpeechRecognition和speechSynthesis实现语音交互，支持语音转文本和文本转语音。在Chrome中可创建语音助手，需HTTPS环境，结合监听、识别、响应逻辑，添加UI反馈与容错机制，适用于本地开发或教育项目。（149字符）

如何利用 web speech api 实现一个支持语音输入和合成的智能助手？

要实现一个支持语音输入和语音合成的智能助手，Web Speech API 是一个强大的浏览器原生工具。它包含两个核心部分：SpeechRecognition（语音识别）用于将用户的语音转为文本，speechSynthesis（语音合成）用于将文本转为语音输出。通过结合这两者，可以构建一个基础但功能完整的语音交互助手。

启用语音识别（SpeechRecognition）

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

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

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

示例代码：

西语写作助手

西语助手旗下的AI智能写作平台，支持西语语法纠错润色、论文批改写作

查看详情

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("抱歉，我没听懂你说什么。");
  }
}

登录后复制