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

WebSpeechAPI语音识别与合成详解

2025-10-27 13:00:29 0浏览收藏

**Web Speech API语音识别与合成教程：打造智能语音交互应用** 想要为你的网页应用添加语音交互功能吗？Web Speech API 提供了强大的浏览器端语音识别与合成能力，让开发者能够轻松实现语音输入和文字朗读。本文将深入讲解如何利用 SpeechRecognition 将语音转换为文字，并通过 SpeechSynthesis 实现文字转语音，包括设置语言、语速等参数，适用于辅助阅读等多种场景。通过本文，你将掌握 Web Speech API 的核心用法，了解语音识别的步骤、语音合成的技巧，以及在实际应用中需要注意的兼容性问题和用户体验优化，助力你构建更智能、更具交互性的Web应用。

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);