HTML5语音识别通过SpeechRecognition API实现，需先检测浏览器支持情况，创建识别实例并设置语言、连续识别等参数，监听结果、错误和结束事件，通过start()/stop()控制识别流程，结合按钮操作可在HTTPS或localhost环境下实现语音转文本功能。
HTML5 的语音识别功能主要通过 SpeechRecognition API 实现，它允许网页捕捉用户的语音并将其转换为文本。目前该 API 在部分现代浏览器中支持，尤其是基于 Chromium 的浏览器（如 Chrome、Edge）。
1. 检测浏览器是否支持 SpeechRecognition
在使用语音识别前，先检查当前浏览器是否支持该 API，避免运行时报错。
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) { // 支持语音识别} else { console.log('当前浏览器不支持语音识别');}
注意：Chrome 使用的是 webkitSpeechRecognition，这是带前缀的版本。
2. 创建 SpeechRecognition 实例
创建一个识别对象，并配置相关参数。
立即学习“前端免费学习笔记（深入）”；
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
这样可以兼容不同浏览器的实现方式。
3. 配置识别参数
可以通过设置属性来控制识别行为：
recognition.lang = ‘zh-CN’; —— 设置识别语言，中文用 ‘zh-CN’，英文可用 ‘en-US’ recognition.interimResults = false; —— 是否返回中间结果（用户说话过程中是否实时显示） recognition.continuous = false; —— 是否持续监听，设为 true 可连续识别多段语音
4. 监听识别事件
绑定关键事件来处理识别结果和状态：
onresult：当识别出结果时触发 onend：识别结束时触发（可用于自动重启） onerror：识别出错时触发
recognition.onresult = function(event) { const transcript = event.results[0][0].transcript; console.log('识别结果：', transcript); document.getElementById('output').textContent = transcript;};recognition.onerror = function(event) { console.log('识别出错：', event.error);};recognition.onend = function() { console.log('识别结束');};
5. 启动和停止识别
调用方法开始或停止语音识别：
recognition.start(); —— 开始录音和识别 recognition.stop(); —— 停止识别（尤其在 continuous 为 false 时自动停止）
通常绑定到按钮点击事件：
document.getElementById('startBtn').onclick = function() { recognition.start();};document.getElementById('stopBtn').onclick = function() { recognition.stop();};
6. 完整示例代码
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();recognition.lang = 'zh-CN';recognition.interimResults = false;recognition.onresult = function(event) { document.getElementById('output').textContent = event.results[0][0].transcript;};recognition.onerror = function(event) { console.log('错误：', event.error);};recognition.onend = function() { console.log('识别已结束');};document.getElementById('startBtn').onclick = () => recognition.start();document.getElementById('stopBtn').onclick = () => recognition.stop();
基本上就这些。只要用户授权麦克风权限，就可以实现基本的语音转文字功能。注意：页面必须运行在 HTTPS 或本地环境（localhost），否则无法获取麦克风权限。
以上就是HTML5语音识别API怎么用_HTML5SpeechRecognitionAPI实现语音识别的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597342.html
微信扫一扫 
支付宝扫一扫 
