使用 JavaScript 的 SpeechRecognition API 实现语音识别
2024-09-11
748 字约 3 分钟
...在现代的 Web 开发中，语音识别已经成为一个非常有用的功能。通过浏览器提供的 SpeechRecognition API，我们可以在网页上实现语音输入的识别功能。本文将介绍如何使用 JavaScript 和 SpeechRecognition API 来实现简单的语音识别功能。
什么是 SpeechRecognition API？
SpeechRecognition API 是 Web 开发中的一项 API，它允许开发者通过浏览器来识别语音输入。通过这个 API，你可以让用户通过麦克风输入语音，并将其转换为文本。SpeechRecognition API 是浏览器的一部分，目前主要支持在 Chrome 和 Edge 浏览器中使用。
实现步骤
步骤 1: 创建 HTML 结构
首先，我们需要创建一个基本的 HTML 结构，包括一个按钮来开始语音输入和一个用于显示结果的区域。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语音识别示例</title>
</head>
<body>
<button id="start-btn">开始语音输入</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
步骤 2: 编写 JavaScript 代码
然后，我们需要编写 JavaScript 代码来实现语音识别的功能。我们将使用 SpeechRecognition API，并在用户点击按钮时启动语音输入。
const startBtn = document.getElementById('start-btn');
const resultDiv = document.getElementById('result');
const recognition = new webkitSpeechRecognition();
recognition.lang = 'zh-CN';
startBtn.addEventListener('click', () => {
recognition.start();
recognition.onresult = (event) => {
const speechResult = event.results[0][0].transcript;
resultDiv.textContent = `语音识别结果：${speechResult}`;
};
recognition.onerror = (event) => {
resultDiv.textContent = '发生错误：' + event.error;
};
});
步骤 3: 运行和测试
将以上代码保存为 script.js，然后用 Chrome 或 Edge 浏览器打开 HTML 文件。点击 "开始语音输入" 按钮，允许浏览器访问麦克风，然后开始说话。浏览器将尝试识别你说的话，并在页面上显示识别结果。
总结
通过使用 SpeechRecognition API，我们可以轻松地在网页上实现语音输入的功能，这对于许多 Web 应用程序来说是非常有用的。虽然目前主要支持在 Chrome 和 Edge 浏览器中使用，但它提供了一个很好的入门点，让我们可以探索和开发更复杂的语音控制功能。
如果您觉得这篇文章有帮助，请点个赞吧～
相关文章
更多文章 →javascript2026-02-24
navigator.sendBeacon全指南
在前端开发中，埋点系统是必不可少的一环。我们经常需要在用户 关闭页面 、 刷新 或 跳转路由 时，向服务器发送最后一条统计数据（比如用户停留时长、页面跳出率）。 但这看似简单的需求，在实现时却危机四伏：请求发不出去？页面跳转卡顿？今天我们就来聊聊这个问题的终极解决方案 —— 。 一、 痛点与传统方案的挣扎 场景还原 当用户点击关闭按钮时，浏览器会触发生命周期事件（ 或 ）。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求，浏览...
学习
javascript2025-11-02
理解浏览器事件系统,从用户点击到事件对象的完整旅程
深入理解浏览器事件系统：从用户点击到事件对象的完整旅程 “当我点击页面按钮时，背后发生了什么？为什么回调函数能收到一个包含丰富信息的event对象？今天，让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象 作为前端开发者，我们每天都在写这样的代码： 这段代码如此熟悉，以至于我们很少停下来思考： 这个 对象到底从哪里来？它为什么能知道点击的精确坐标？为什么能识别是哪个元素被点击了？ 更神奇的是，当我们手动创建事件时：...
学习
javascript2025-10-01
实现大文件上传全流程详解
在日常开发中，大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件，直接上传不仅容易超时，还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案，支持分片上传、断点续传、秒传和手动中。 一、先看效果：我们要实现什么？ 先上核心功能清单，确保大家明确目标，知道我们要解决哪些实际问题： 大文件分片上传 ：将文件切成固定大小的小片段分批上传，避免单次请求超时 秒传 ：服务器已存在完整文件时，直接返...
学习
javascript2025-09-18
JavaScript 的多线程能力：Worker
如果你写过一些计算量稍大的 JavaScript 代码，比如图像处理、大量数据排序或者复杂的算法，你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应，动画也停了，就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript，又要负责渲染页面、响应用户操作，一旦它被繁重的计算任务占满，就无暇顾及其他，用户体验便直线下降。 这个问题的根源，正是“主线程是单线程的”。那么，如何解决呢？ 答案很简单：把这...
学习面试
javascript2025-09-15
一张 8K 海报差点把首屏拖垮
你给后台管理系统加了一个「企业风采」模块，运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s，LCP 红得发紫。 老板一句「能不能像朋友圈那样滑到哪看到哪？」——于是你把懒加载重新翻出来折腾了一轮。 解决方案：三条技术路线，你全踩了一遍 1\. 最偷懒：原生 一行代码就能跑，浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖，IE 全军覆没。 必须写死 ，否则 CLS 会抖成 PPT。 适用场景...
学习
javascript2025-09-10
🚀 Web Worker让你的应用丝滑
🌟 引言 在日常的前端开发中，你是否遇到过这样的困扰： 大数据处理时页面卡死 ：处理几万条数据时，页面直接卡成PPT，用户点击毫无反应 复杂计算阻塞UI ：图片处理、数据分析等计算密集型任务让整个应用假死 文件上传/下载卡顿 ：大文件操作时，其他功能完全无法使用 实时数据处理性能差 ：WebSocket接收大量数据时，页面渲染严重滞后 今天分享6个Web Worker的核心技巧，让你的应用告别卡顿，用户体验丝滑如德芙！ 💡 核心技巧...
学习
评论
请登录后发表评论
去登录