Web Speech API 提供语音识别与合成功能，通过 SpeechRecognition 实现语音转文字，需用户触发并处理权限；使用 SpeechSynthesis 将文字转语音，可设置语言、语速等参数，适合辅助阅读等场景。
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。
疯狂翻译师App
支持屏幕、图片、视频字幕、文档、漫画等多种翻译，准确率高，操作简单。
104 查看详情
使用方式更简单：
准备要朗读的文本 创建一个 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 使用简单，适合快速集成基础语音功能。只要注意兼容性和用户体验，就能做出实用的语音交互功能。
以上就是如何用Web Speech API实现语音识别与合成？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/725399.html
微信扫一扫 
支付宝扫一扫 
