使用J*aScript实现语音识别与合成_Web API

技术教程
2025-11-03 23:25:02

首先实现语音识别，通过webkitSpeechRecognition捕获用户语音并转文本，需设置语言、监听结果与错误事件；再实现语音合成，利用SpeechSynthesisUtterance将文本转语音，可配置语言、语速、音调等参数，并通过speak()播放。

使用javascript实现语音识别与合成_web api

语音识别与合成在现代Web应用中越来越常见，J*aScript结合Web API可以轻松实现这些功能。通过浏览器提供的SpeechRecognition和SpeechSynthesis接口，开发者能让网页“听懂”用户说话并“读出”文字内容。下面介绍如何使用这两个API完成语音识别与语音合成。

语音识别：让网页听懂你说的话

浏览器的 SpeechRecognition 接口（目前主要通过webkitSpeechRecognition支持）允许你捕获用户的语音输入并转换为文本。

基本用法：

检查浏览器是否支持语音识别
创建识别实例，设置参数如语言、是否连续识别
监听结果事件，获取识别到的文本

示例代码：

if ('webkitSpeechRecognition' in window) {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = 'zh-CN'; // 设置中文
  recognition.continuous = false; // 单次识别
  recognition.interimResults = false; // 不返回中间结果

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

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

  // 开始识别
  recognition.start();
} else {
  alert('当前浏览器不支持语音识别');
}

语音合成：让网页开口说话

SpeechSynthesis 是Web平台内置的语音合成接口，能将文本转为语音朗读出来，无需额外库。

BEES企业网站管理系统3.4

主要特性： 1、支持多种语言 BEES支持多种语言，后台添加自动生成，可为每种语言分配网站风格。 2、功能强大灵活 BEES除内置的文章、产品等模型外，还可以自定义生成其它模型，满足不同的需求 3、自定义表单系统 BEES可自定义表单系统，后台按需要生成，将生成的标签加到模板中便可使用。 4、模板制作方便采用MVC设计模式实现了程序与模板完全分离，分别适合美工和程序员使用。 5、用户体验好前台

0 查看详情 BEES企业网站管理系统3.4

常用操作：

使用speechSynthesis.getVoices()获取可用发音人
创建SpeechSynthesisUtterance实例，设置文本、音调、语速、音量等
调用speak()方法播放语音

示例代码：

function speak(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  
  // 可选：设置语音参数
  utterance.lang = 'zh-CN';
  utterance.pitch = 1;   // 音调
  utterance.rate = 1.1;  // 语速
  utterance.volume = 1;  // 音量

  // 可选：选择特定发音人
  const voices = window.speechSynthesis.getVoices();
  const voice = voices.find(v => v.lang === 'zh-CN');
  if (voice) utterance.voice = voice;

  window.speechSynthesis.speak(utterance);
}

// 调用示例
speak('你好，这是语音合成的示例');

注意：getVoices()可能需要稍等加载，可添加延迟或监听voiceschanged事件。