使用JavaScript实现语音识别与合成_Web API-js教程-PHP中文网

使用JavaScript实现语音识别与合成_Web API

狼影

发布： 2025-11-03 23:25:02

原创

482人浏览过

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

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

语音识别与合成在现代Web应用中越来越常见，JavaScript结合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平台内置的语音合成接口，能将文本转为语音朗读出来，无需额外库。

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

绘蛙

电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

179

查看详情

常用操作：

使用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事件。