JavaScript如何实现语音识别与语音合成的交互功能

在网页端实现语音交互功能，核心依赖的是浏览器提供的Web Speech API，该API包含SpeechRecognition和SpeechSynthesis两个主要接口，分别负责语音识别和语音合成能力，开发者可以直接通过JavaScript调用这些接口完成功能开发。

语音识别功能实现

语音识别是将用户的语音输入转换为文本的过程，对应的接口是SpeechRecognition，不同浏览器的实现前缀略有不同，开发时需要做兼容处理。

基础识别示例

以下是一个简单的语音识别实现代码，能够将用户说出的内容实时转换为文本并显示在页面上：

// 兼容不同浏览器的SpeechRecognition接口
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
  alert("当前浏览器不支持语音识别功能");
} else {
  // 创建语音识别实例
  const recognition = new SpeechRecognition();
  // 设置识别语言为中文
  recognition.lang = "zh-CN";
  // 设置为连续识别模式
  recognition.continuous = true;
  // 是否返回临时识别结果
  recognition.interimResults = true;

  // 获取页面元素
  const startBtn = document.getElementById("startBtn");
  const stopBtn = document.getElementById("stopBtn");
  const resultBox = document.getElementById("result");

  // 开始识别
  startBtn.addEventListener("click", () => {
    recognition.start();
    resultBox.innerHTML = "正在识别语音...";
  });

  // 停止识别
  stopBtn.addEventListener("click", () => {
    recognition.stop();
  });

  // 识别结果返回事件
  recognition.onresult = (event) => {
    let finalText = "";
    let interimText = "";
    // 遍历所有识别结果
    for (let i = event.resultIndex; i < event.results.length; i++) {
      const transcript = event.results[i][0].transcript;
      if (event.results[i].isFinal) {
        finalText += transcript;
      } else {
        interimText += transcript;
      }
    }
    // 显示最终结果和临时结果
    resultBox.innerHTML = finalText + "<em>临时结果: " + interimText + "</em>";
  };

  // 识别错误处理
  recognition.onerror = (event) => {
    console.error("语音识别错误:", event.error);
    resultBox.innerHTML = "识别出错，请重试";
  };
}

常用参数说明

语音识别实例的常用配置参数如下：

• lang：设置识别的语言，中文为zh-CN，英文为en-US，默认使用浏览器语言
• continuous：是否开启连续识别，true为持续识别直到手动停止，false为识别到一句话后自动停止
• interimResults：是否返回临时识别结果，true时会在识别过程中实时返回不确定的文本，false只返回最终确认的结果
• maxAlternatives：设置返回的最大候选结果数量，默认是1

语音合成功能实现

语音合成是将文本转换为语音播放的过程，对应的接口是SpeechSynthesis，该接口的兼容性比语音识别更好，大部分现代浏览器都支持。

基础合成示例

以下是一个简单的语音合成实现代码，能够将输入的文本转换为语音播放：

// 获取页面元素
const speakBtn = document.getElementById("speakBtn");
const textInput = document.getElementById("textInput");
const voiceSelect = document.getElementById("voiceSelect");

// 存储可用的语音列表
let voices = [];

// 加载可用的语音列表
function loadVoices() {
  voices = speechSynthesis.getVoices();
  // 清空下拉框
  voiceSelect.innerHTML = "";
  // 遍历语音列表，添加到下拉框
  voices.forEach((voice, index) => {
    const option = document.createElement("option");
    option.value = index;
    option.textContent = voice.name + " (" + voice.lang + ")";
    voiceSelect.appendChild(option);
  });
}

// 语音列表加载事件
speechSynthesis.onvoiceschanged = loadVoices;
// 初始加载一次语音列表
loadVoices();

// 点击播放按钮触发语音合成
speakBtn.addEventListener("click", () => {
  const text = textInput.value.trim();
  if (!text) {
    alert("请输入要转换的文本");
    return;
  }
  // 如果当前正在播放语音，先停止
  if (speechSynthesis.speaking) {
    speechSynthesis.cancel();
  }
  // 创建语音合成实例
  const utterance = new SpeechSynthesisUtterance(text);
  // 设置语音
  const selectedVoiceIndex = voiceSelect.value;
  if (voices[selectedVoiceIndex]) {
    utterance.voice = voices[selectedVoiceIndex];
  }
  // 设置语速，范围0.1到10，默认1
  utterance.rate = 1;
  // 设置音调，范围0到2，默认1
  utterance.pitch = 1;
  // 设置音量，范围0到1，默认1
  utterance.volume = 1;
  // 开始播放
  speechSynthesis.speak(utterance);
});

常用参数说明

语音合成实例的常用配置参数如下：

完整交互示例

将语音识别和语音合成结合，就可以实现简单的语音交互功能，比如用户说出问题，程序识别后给出回复并语音播报：

// 结合语音识别和语音合成实现简单交互
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = "zh-CN";
recognition.continuous = false;
recognition.interimResults = false;

// 简单的问题回复映射
const replyMap = {
  "你好": "你好，我是语音助手",
  "今天天气怎么样": "今天天气晴朗，适合外出",
  "你是谁": "我是一个基于JavaScript实现的语音交互程序"
};

// 识别到最终结果后处理
recognition.onresult = (event) => {
  const userText = event.results[0][0].transcript.trim();
  console.log("用户说:", userText);
  // 获取回复内容
  let replyText = replyMap[userText];
  if (!replyText) {
    replyText = "抱歉，我还不能理解这个问题";
  }
  // 语音播报回复
  const utterance = new SpeechSynthesisUtterance(replyText);
  speechSynthesis.speak(utterance);
};

// 启动识别
recognition.start();

注意事项

• 语音识别功能需要浏览器支持，Chrome、Edge等基于Chromium的浏览器支持较好，部分移动端浏览器可能不支持
• 语音识别通常需要页面在HTTPS环境下运行，本地localhost环境也可以正常使用
• 语音合成的语音列表需要在onvoiceschanged事件触发后才能获取到，不能直接在页面加载时获取
• 长时间使用语音识别可能会消耗较多系统资源，建议不需要时及时调用stop方法停止识别

JavaScript语音识别语音合成Web_Speech_API修改时间：2026-07-05 16:09:38