JavaScript实现语音识别与合成教程

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《用JavaScript实现语音识别与合成的方法》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

答案：使用Web Speech API可实现语音识别与合成。首先检查浏览器支持情况，SpeechRecognition用于将语音转文本，需配置语言及参数并监听结果；SpeechSynthesis则将文本转语音，通过设置utterance属性并调用speak()播放。结合二者可构建简单语音助手，注意需在HTTPS或localhost运行，获取麦克风权限，并在voicesloaded后使用语音列表。

要实现一个简单的语音识别或语音合成功能，JavaScript 提供了浏览器原生的 Web Speech API，包含 SpeechRecognition（语音识别）和 SpeechSynthesis（语音合成）两个核心接口。下面分别介绍如何使用它们创建基础应用。

语音识别：听懂用户说的话

SpeechRecognition 接口可以将用户的语音转换为文本。目前主要在 Chrome 和基于 Chromium 的浏览器中支持较好。

• 检查浏览器是否支持 SpeechRecognition
• 创建识别实例并配置参数
• 监听结果事件并处理输出

示例代码：

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
  const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new Recognition();
  recognition.lang = 'zh-CN'; // 设置语言
  recognition.interimResults = false; // 是否返回中间结果

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

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

  // 开始识别
  document.getElementById('start-btn').onclick = () => {
    recognition.start();
  };
} else {
  alert('当前浏览器不支持语音识别');
}

语音合成：让网页“说话”

SpeechSynthesis 是 Web Speech API 中用于文本转语音的部分，兼容性较好，几乎所有现代浏览器都支持。

• 获取 speechSynthesis 对象
• 创建 SpeechSynthesisUtterance 实例
• 设置语速、音调、语言等参数
• 调用 speak() 播放语音

示例代码：

function speak(text) {
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'zh-CN'; // 中文发音
    utterance.rate = 1; // 语速（0.1 ~ 10）
    utterance.pitch = 1; // 音调（0 ~ 2）

    // 可选：选择声音
    const voices = window.speechSynthesis.getVoices();
    const femaleVoice = voices.find(voice => voice.name.includes('Google 普通话'));
    if (femaleVoice) {
      utterance.voice = femaleVoice;
    }

    window.speechSynthesis.speak(utterance);
  } else {
    alert('当前浏览器不支持语音合成');
  }
}

// 触发朗读
document.getElementById('speak-btn').onclick = () => {
  const text = document.getElementById('input-text').value;
  speak(text);
};

完整小应用结构建议

你可以结合两者做一个交互式语音助手雏形：

• 用户点击按钮开始说话 → 语音识别转文字
• 系统根据关键词回复一段文字
• 调用语音合成把回复“念”出来

注意点：

• 语音识别需要 HTTPS 或本地开发环境（如 localhost）
• 首次使用可能需要用户授权麦克风权限
• SpeechSynthesis 需等待 voicesloaded 事件以确保声音可用（可调用 speechSynthesis.getVoices() 前先监听 onvoiceschanged）

好了，本文到此结束，带大家了解了《JavaScript实现语音识别与合成教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！