当前位置： 首页 > news >正文

探索 Web Speech API：实现浏览器语音识别与合成

news 2026/2/9 16:06:34

引言

Web Speech API 是一项由 W3C 开发的 Web 标准，为开发者提供了在 Web 应用程序中实现语音识别和语音合成的能力。通过 Web Speech API，我们可以让网页与用户进行语音交互，实现更加智能化和便捷的用户体验。本文将深入探讨 Web Speech API 的原理、用法和实际应用，帮助开发者了解如何利用这一技术为自己的 Web 应用增添语音功能。

一、Web Speech API 的概述

Web Speech API 是一组用于实现语音识别和语音合成的 JavaScript 接口，包括 SpeechRecognition 和 SpeechSynthesis 两个主要接口。SpeechRecognition 接口用于实现语音识别，让浏览器可以识别用户的语音输入；SpeechSynthesis 接口用于实现语音合成，允许浏览器生成人工语音。

二、使用 SpeechRecognition 实现语音识别

  1. 初始化 SpeechRecognition 对象：通过创建 SpeechRecognition 对象来初始化语音识别器。

  2. 设置识别参数：可以设置语言、连续识别与单次识别、识别回调等参数。

  3. 开始识别：调用 start() 方法开始识别用户的语音输入。

  4. 处理识别结果：通过监听 result 事件获取识别结果，并对识别的文本进行后续处理。

三、使用 SpeechSynthesis 实现语音合成

  1. 初始化 SpeechSynthesis 对象：通过创建 SpeechSynthesis 对象来初始化语音合成器。

  2. 创建合成语音： SpeechSynthesisUtterance 对象来创建要合成的语音。

  3. 设置语音参数：可以设置语言、音调、音量、速率等语音参数。

  4. 播放语音：调用 speak() 方法开始播放合成的语音。

四、实际应用场景

  1. 语音搜索：实现网页的语音搜索功能，让用户通过语音口令来进行检索。

  2. 语音交互：创建具有语音导航和语音提示的网页应用，提升用户体验。

  3. 语音输入：实现语音转文字输入框，让用户可以通过语音输入文本。

Web Speech API 提供了将语音合成和语音识别添加到 Web 应用程序的功能。使用此 API，我们将能够向 Web 应用程序发出语音命令，就像在 Android 上通过其 Google Speech 或在 Windows 中使用 Cortana 一样。

下面来看一个简单的例子，使用 Web Speech API 实现文字转语音和语音转文字：

<body><header><h2>Web APIs<h2></header><div class="web-api-cnt"><div id="error" class="close"></div><div class="web-api-card"><div class="web-api-card-head">Demo - Text to Speech</div><div class="web-api-card-body"><div><input placeholder="Enter text here" type="text" id="textToSpeech" /></div><div><button onclick="speak()">Tap to Speak</button></div></div></div><div class="web-api-card"><div class="web-api-card-head">Demo - Speech to Text</div><div class="web-api-card-body"><div><textarea placeholder="Text will appear here when you start speeaking." id="speechToText"></textarea></div><div><button onclick="tapToSpeak()">Tap and Speak into Mic</button></div></div></div></div>
</body><script>try {var speech = new SpeechSynthesisUtterance()var SpeechRecognition = SpeechRecognition;var recognition = new SpeechRecognition()} catch(e) {error.innerHTML = "此设备不支持 Web Speech API"error.classList.remove("close")                }function speak() {speech.text = textToSpeech.valuespeech.volume = 1speech.rate=1speech.pitch=1window.speechSynthesis.speak(speech)}function tapToSpeak() {recognition.onstart = function() { }recognition.onresult = function(event) {const curr = event.resultIndexconst transcript = event.results[curr][0].transcriptspeechToText.value = transcript}recognition.onerror = function(ev) {console.error(ev)}recognition.start()}
</script>

fileOf7174.png

第一个演示 Demo - Text to Speech 演示了使用这个 API 和一个简单的输入字段，接收输入文本和一个按钮来执行语音操作。

function speak() {const speech = new SpeechSynthesisUtterance();speech.text = textToSpeech.value;speech.volume = 1;speech.rate = 1;speech.pitch = 1;window.speechSynthesis.speak(speech);
}

它实例化了  SpeechSynthesisUtterance()  对象，将文本设置为从输入框中输入的文本中朗读。然后，使用  speech  对象调用  SpeechSynthesis#speak  函数，在扬声器中说出输入框中的文本。

第二个演示 Demo - Speech to Text 将语音识别为文字。点击 Tap and Speak into Mic 按钮并对着麦克风说话，我们说的话会被翻译成文本输入框中的内容。

点击 Tap and Speak into Mic 按钮会调用 tapToSpeak 函数：

function tapToSpeak() {var SpeechRecognition = SpeechRecognition;const recognition = new SpeechRecognition();recognition.onstart = function () {};recognition.onresult = function (event) {const curr = event.resultIndex;const transcript = event.results[curr][0].transcript;speechToText.value = transcript;};recognition.onerror = function (ev) {console.error(ev);};recognition.start();
}

这里实例化了  SpeechRecognition，然后注册事件处理程序和回调。语音识别开始时调用  onstart，发生错误时调用  onerror。每当语音识别捕获一条线时，就会调用  onresult。

在  onresult  回调中，提取内容并将它们设置到  textarea  中。因此，当我们对着麦克风说话时，文字会出现在  textarea  内容中。

五、Web Speech API 的兼容性与注意事项

  1. 兼容性：Web Speech API 在现代浏览器（如 Chrome、Firefox）中得到广泛支持，但在一些旧版本浏览器上可能会有兼容性问题。

  2. 隐私考虑：使用语音别和合成功能时，要注意用户隐私和数据安全，避免敏感信息泄露。

结语

Web Speech API 为开发者提供了强大的语音识别和语音合成能力，可以为 Web 应用增添智能化和便捷的用户交互。本文深入探讨了 Web Speech API 的概述、使用方法和实际应用场景，希望可以帮助开发者更好地利用这一技术。随着 Web 技术的不断发展，语音交互将会成为未来 Web 应用的重要趋势之一。

参考资料

  • MDN 文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API

 

相关文章：

探索 Web Speech API：实现浏览器语音识别与合成

引言 Web Speech API 是一项由 W3C 开发的 Web 标准&#xff0c;为开发者提供了在 Web 应用程序中实现语音识别和语音合成的能力。通过 Web Speech API&#xff0c;我们可以让网页与用户进行语音交互&#xff0c;实现更加智能化和便捷的用户体验。本文将深入探讨 Web Speech A…...

编程日记 2024/9/23 4:44:41

python基础题练习

1.可否定义一个sum函数呢&#xff1f;返回指定区间的值的和&#xff1f;例如&#xff0c;区间[1,4]的和为123410返回指定区间值的平方的和呢&#xff1f;立方呢&#xff1f; 代码&#xff1a; # 计算从start到end&#xff08;包括end&#xff09;的所有整数的和。 def sum_ra…...

编程日记 2024/9/23 4:43:40

工业交换机如何保证数据的访问安全

在现代工业自动化环境中&#xff0c;工业交换机作为关键的网络设备&#xff0c;扮演着数据传输和信息交互的重要角色。为了确保数据的访问安全&#xff0c;工业交换机不仅具备高效的转发性能&#xff0c;还集成了多层次的安全防护机制&#xff0c;以抵御各种潜在的网络威胁。 首…...

编程日记 2024/9/23 4:40:37

jmeter得到的文档数据处理

通过前面jmeter得到的输出文档&#xff0c;这里是txt文档&#xff0c;里面包含了很多条数据&#xff0c;每条数据的结构如下&#xff1a; 【request】 uuid&#xff1a;xxxxxxx timestamp&#xff1a;xxxxxxxx No.x question&#xff1a;xxxxxxx 【response】 code&#…...

编程日记 2024/9/23 4:38:35

12- 【JavaWeb】校园快递管理系统-数据库建设

项目概述 开发一个Javaweb校园快递管理系统&#xff0c;包含以下功能&#xff1a; 数据库设计 首先,我们需要设计数据库的表结构。主要包括以下表: 学生表: 存储学生的基本信息&#xff0c;姓名、手机号。快递表: 存储快递的信息&#xff0c;快递单号、收件人、收件人手机号、…...

编程日记 2024/9/23 4:37:34

Windows本地连接远程服务器并创建新用户详细记录

前提可知&#xff1a; &#xff08;1&#xff09;服务器IP地址&#xff1a;x.x.x.x &#xff08;2&#xff09;服务器名称&#xff1a;root&#xff08;一般默认为root&#xff0c;当然也有别的名称&#xff09; &#xff08;3&#xff09;服务器登陆密码&#xff1a;**** 一、…...

编程日记 2024/9/23 4:34:31

【kaggle竞赛】毒蘑菇的二元预测题目相关信息和思路求解代码

毒蘑菇的二元预测 您提供了很多关于不同二元分类任务的资源和链接&#xff0c;看起来这些都是Kaggle竞赛中的参考资料和高分解决方案。为了帮助您更好地利用这些资源&#xff0c;这里是一些关键点的总结&#xff1a; Playground Season 4 Episode 8 主要关注的竞赛: 使用银行…...

编程日记 2024/9/23 4:33:30

Pytest-allure如何在测试完成后自动生成完整报告？

一、完整步骤 常规allure报告的生成方法是在pytest全部用例执行完成后&#xff0c;手动在命令行执行如 allure generate ./temps -o ./report --clean每次用例执行完成后都要重复如此的操作&#xff0c;十分繁琐。 可以使用如下方式让用例执行完成后自动生成报告到当前目录下…...

编程日记 2024/9/23 4:32:29

数据结构-树（基础，分类，遍历）

数据结构-树 1.什么是树&#xff1f; 在计算机科学中&#xff0c;树是一种常用的非线性数据结构&#xff0c;用于表示具有层次关系的数据。与线性数据结构&#xff08;如数组和链表&#xff09;不同&#xff0c;树结构以节点&#xff08;Nodes&#xff09;和边&#xff08;Ed…...

编程日记 2024/9/23 4:29:26

CodeGeeX4：程序员的高效助手，多语言代码生成神器！

你是否曾在编写代码时&#xff0c;为复杂的语法、逻辑错误而绞尽脑汁&#xff1f;或是在面对多个编程语言的切换时&#xff0c;感觉脑子快要爆炸&#xff1f;别担心&#xff01;一款全新的多语言代码生成神器——CodeGeeX4&#xff0c;正悄然成为程序员们的“救命稻草”。它不仅…...

编程日记 2024/9/23 4:27:25

小程序组件间通信

文章目录 父传子子传父获取组件实例兄弟通信 父传子 知识点&#xff1a; 父组件如果需要向子组件传递指定属性的数据&#xff0c;在 WXML 中需要使用数据绑定的方式 与普通的 WXML 模板类似&#xff0c;使用数据绑定&#xff0c;这样就可以向子组件的属性传递动态数据。 父…...

编程日记 2024/9/23 4:25:23

Homebrew安装与切换下载源

一、安装 1.Homebrew的官网地址 https://brew.sh/zh-cn/ 2.执行命令行安装 /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)” 3.无法连接到https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh的地址 解决…...

编程日记 2024/9/23 4:24:22

C#回调函数

1、定义并初始化委托 public delegate void CallbackDelegate(string message);//定义一个委托类型CallbackDelegate callbackDelegate;//声明一个委托对象/// <summary>/// 定义委托对应的函数/// </summary>/// <param name"str"></param>…...

编程日记 2024/9/23 4:23:21

Matplotlib绘制热力图

热力图&#xff08;Heatmap&#xff09;是一种使用颜色来表示数值强度的数据可视化工具。它常用于以下场景&#xff1a; 热力图的适用场景 数据的相关性分析&#xff1a;在统计学中&#xff0c;热力图常用于展示变量之间的相关性&#xff0c;尤其是当数据量较大时&#xff0c;…...

编程日记 2024/9/23 4:19:17

手写SpringMVC

1、开发HspDispatcherServlet 2、完成客户端/浏览器可以请求控制层 目的&#xff1a;发出url请求时&#xff0c;经过前端控制器&#xff0c;找到Monster的List方法&#xff0c;把结果再打回去 3、从web.xml动态获取hspspringmvc.xml 4、完成自定义Service注解功能 目的&…...

编程日记 2024/9/23 4:18:16

mysql学习教程，从入门到精通，SQL 删除数据（DELETE 语句）（18）

1、SQL 删除数据&#xff08;DELETE 语句&#xff09; 在编写SQL中的DELETE语句时&#xff0c;需要非常小心&#xff0c;因为一旦执行&#xff0c;被删除的数据就无法恢复了&#xff08;除非你有备份&#xff09;。DELETE语句用于从数据库表中移除一条或多条记录。这里&#x…...

编程日记 2024/9/23 4:17:15

周边游小程序开发

开发一个周边游小程序是一个既有趣又富有挑战性的项目&#xff0c;它可以帮助用户发现周边的旅游景点、活动、美食和住宿等&#xff0c;提升用户的旅游体验。以下是开发周边游小程序的基本步骤和一些建议&#xff1a; 1.市场调研与需求分析 目标用户定位&#xff1a;确定你的用…...

编程日记 2024/9/23 4:13:12

初级前端面试

1.介绍自己 2.介绍一下之前做过的项目以及接触的业务 3.最近学的技术&#xff0c;接触的是哪一块&#xff08;回答了vue3&#xff09; 4.vue3在什么时候调用接口 beforeCreate 在实例初始化之后&#xff0c;数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 用…...

编程日记 2024/9/23 4:10:09

微软AI核电计划

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/9/23 4:08:07

图片马赛克处理（Java）

1.需求 给图片的指定区域打码给整张图片打码马赛克方格取色支持中心点取色和随机取色马赛克支持灰度处理 2.源码 package com.visy.utils;import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOE…...

编程日记 2024/9/23 4:07:06

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/11/22 20:41:02