首页 > 文章 > 前端

WebSpeechAPI语音识别与合成详解

时间：2025-09-29 08:13:28 357浏览收藏

哈喽！今天心血来潮给大家带来了《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);

实际应用建议

在真实项目中需要注意以下几点：

语音识别需用户主动触发（如点击按钮），不能自动启动
注意处理权限拒绝或网络中断的情况
语音合成在移动设备上可能有自动播放限制
识别结果可能存在误差，尤其是口音或背景噪音较大时
可结合 WebSocket 或 AI 接口进一步处理识别后的文本

基本上就这些。Web Speech API 使用简单，适合快速集成基础语音功能。只要注意兼容性和用户体验，就能做出实用的语音交互功能。

终于介绍完啦！小伙伴们，这篇关于《WebSpeechAPI语音识别与合成详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！