如何利用 JavaScript 实现一个简单的语音识别或合成应用？-js教程-PHP中文网

如何利用 JavaScript 实现一个简单的语音识别或合成应用？

狼影

发布： 2025-10-06 09:24:02

原创

895人浏览过

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

如何利用 javascript 实现一个简单的语音识别或合成应用？

要实现一个简单的语音识别或语音合成功能，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 中用于文本转语音的部分，兼容性较好，几乎所有现代浏览器都支持。

立即学习“Java免费学习笔记（深入）”；

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

使用方法：

获取 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);
};

登录后复制