当前位置：首页 > 文章列表 > 文章 > 前端 > WebSpeechAPI语音识别与合成详解

WebSpeechAPI语音识别与合成详解

2025-09-29 08:13:28 0浏览收藏

哈喽！今天心血来潮给大家带来了《Web Speech API语音识别与合成教程》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

Web Speech API 提供语音识别与合成功能，通过 SpeechRecognition 实现语音转文字，需用户触发并处理权限；使用 SpeechSynthesis 将文字转语音，可设置语言、语速等参数，适合辅助阅读等场景。

如何用Web Speech API实现语音识别与合成？

Web Speech API 提供了浏览器端的语音识别和语音合成功能，让你可以通过 JavaScript 实现语音输入与文字朗读。它包含两个主要部分：SpeechRecognition（或 SpeechRecognitionAlternative）用于语音识别，SpeechSynthesis 用于语音合成。下面介绍如何使用它们。

语音识别：将语音转为文字

语音识别功能允许用户通过说话，将声音内容实时转换成文本。目前该功能在 Chrome 和 Edge 等基于 Chromium 的浏览器中支持较好。

使用步骤如下：

检查浏览器是否支持 SpeechRecognition 或其前缀版本 webkitSpeechRecognition
创建识别实例，设置相关参数
监听结果事件并获取识别出的文字

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置语言为中文
recognition.interimResults = false; // 是否返回中间结果
recognition.continuous = false; // 是否持续监听

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

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

// 开始识别
recognition.start();

调用 start() 方法后，浏览器会请求麦克风权限。用户说完话后，onresult 会触发并返回最终文本。

语音合成：将文字转为语音

语音合成功能可以让网页“朗读”指定的文字，适用于辅助阅读、语音提醒等场景。所有现代浏览器都基本支持 SpeechSynthesis。

使用方式更简单：

准备要朗读的文本
创建一个 SpeechSynthesisUtterance 实例
可选地设置音调、语速、音量和发音语言
调用 speechSynthesis.speak() 播放

const utterance = new SpeechSynthesisUtterance('你好，这是语音合成示例');
utterance.lang = 'zh-CN';
utterance.rate = 1; // 语速，0.1 到 10
utterance.pitch = 1; // 音调，0 到 2
utterance.volume = 1; // 音量，0 到 1

speechSynthesis.speak(utterance);

你还可以通过 speechSynthesis.getVoices() 获取可用的发音人列表，并为 utterance.voice 赋值来选择不同声音。

// 获取所有语音（可能需要延迟加载）
setTimeout(() => {
const voices = speechSynthesis.getVoices();
utterance.voice = voices.find(v => v.lang === 'zh-CN');
}, 100);