答案：使用Web Speech API可实现语音识别与合成。首先检查浏览器支持情况，SpeechRecognition用于将语音转文本，需配置语言及参数并监听结果；SpeechSynthesis则将文本转语音，通过设置utterance属性并调用speak()播放。结合二者可构建简单语音助手，注意需在HTTPS或localhost运行，获取麦克风权限，并在voicesloaded后使用语音列表。
要实现一个简单的语音识别或语音合成功能，JavaScript 提供了浏览器原生的 Web Speech API，包含 SpeechRecognition（语音识别）和 SpeechSynthesis（语音合成）两个核心接口。下面分别介绍如何使用它们创建基础应用。
语音识别：听懂用户说的话
SpeechRecognition 接口可以将用户的语音转换为文本。目前主要在 Chrome 和基于 Chromium 的浏览器中支持较好。
使用步骤：检查浏览器是否支持 SpeechRecognition 创建识别实例并配置参数 监听结果事件并处理输出
示例代码：
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) { const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new Recognition(); recognition.lang = 'zh-CN'; // 设置语言 recognition.interimResults = false; // 是否返回中间结果 recognition.onresult = (event) => { const transcript = event.results[0][0].transcript; console.log('识别结果:', transcript); document.getElementById('output').textContent = transcript; }; recognition.onerror = (event) => { console.error('识别出错:', event.error); }; // 开始识别 document.getElementById('start-btn').onclick = () => { recognition.start(); };} else { alert('当前浏览器不支持语音识别');}
语音合成：让网页“说话”
SpeechSynthesis 是 Web Speech API 中用于文本转语音的部分，兼容性较好，几乎所有现代浏览器都支持。
立即学习“Java免费学习笔记（深入）”；
使用方法：获取 speechSynthesis 对象 创建 SpeechSynthesisUtterance 实例 设置语速、音调、语言等参数 调用 speak() 播放语音
示例代码：
function speak(text) { if ('speechSynthesis' in window) { const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'zh-CN'; // 中文发音 utterance.rate = 1; // 语速（0.1 ~ 10） utterance.pitch = 1; // 音调（0 ~ 2） // 可选：选择声音 const voices = window.speechSynthesis.getVoices(); const femaleVoice = voices.find(voice => voice.name.includes('Google 普通话')); if (femaleVoice) { utterance.voice = femaleVoice; } window.speechSynthesis.speak(utterance); } else { alert('当前浏览器不支持语音合成'); }}// 触发朗读document.getElementById('speak-btn').onclick = () => { const text = document.getElementById('input-text').value; speak(text);};
完整小应用结构建议
你可以结合两者做一个交互式语音助手雏形：
用户点击按钮开始说话 → 语音识别转文字 系统根据关键词回复一段文字 调用语音合成把回复“念”出来
注意点：
语音识别需要 HTTPS 或本地开发环境（如 localhost） 首次使用可能需要用户授权麦克风权限 SpeechSynthesis 需等待 voicesloaded 事件以确保声音可用（可调用 speechSynthesis.getVoices() 前先监听 onvoiceschanged）基本上就这些，不复杂但容易忽略细节。
以上就是如何利用 JavaScript 实现一个简单的语音识别或合成应用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526869.html
微信扫一扫 
支付宝扫一扫 
