HTML5语音识别API怎么用_HTML5SpeechRecognitionAPI实现语音识别的方法

HTML5语音识别通过SpeechRecognition API实现，需先检测浏览器支持情况，创建识别实例并设置语言、连续识别等参数，监听结果、错误和结束事件，通过start()/stop()控制识别流程，结合按钮操作可在HTTPS或localhost环境下实现语音转文本功能。

html5语音识别api怎么用_html5speechrecognitionapi实现语音识别的方法

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. 配置识别参数

可以通过设置属性来控制识别行为：

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

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. 完整示例代码

<input type="button" id="startBtn" value="开始识别">
<input type="button" id="stopBtn" value="停止识别">
<p id="output"></p>

<script>
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();
</script>

基本上就这些。只要用户授权麦克风权限，就可以实现基本的语音转文字功能。注意：页面必须运行在 HTTPS 或本地环境（localhost），否则无法获取麦克风权限。

以上就是HTML5语音识别API怎么用_HTML5SpeechRecognitionAPI实现语音识别的方法的详细内容，更多请关注其它相关文章！

# 是一个 # 网站seo优化推广工具好处 # 广东百度查关键词排名 # 美国电影网站建设 # 铁岭seo查询如何做 # 淘宝seo价格优化模型 # 网站推广快寻a金脉科技权威 # 线下如何推广网站 # 上门seo优化管理系统 # 柳南区网站建设营销 # 镇江企业网站推广服务 # 与传统 # 这是 # html # 的是 # 多语言 # 源代码 # 绑定 # 语音识别 # 关键词 # 点击事件 # 自动重启 # win # edge # 浏览器 # html5

返回目录在线咨询

上一篇：HTML文本与J*aScript怎么联动_HTML文本与J*aScript怎么联动实现动态效果
下一篇：J*aScript_代码规范与团队协作最佳实践

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商