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

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

news 文章来源：https://blog.csdn.net/qq_24956515/article/details/142431498 2025/5/25 21:48:02

引言

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+selenium实现自动联网认证，并实现断网重连

pythonselenium实现自动联网认证&#xff0c;并实现断网重连 echo off python “E:\autoD\auto_login.py” 要使自动登录脚本在系统重启后自动运行&#xff0c;你可以使用Windows的任务计划程序来设置。以下是详细的步骤&#xff1a; 1. 保存脚本 首先&#xff0c;将你的Py…...

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

基于机器学习的注意力缺陷/多动障碍 （ADHD）（python论文+代码）HYPERAKTIV

简述 医疗保健领域的机器学习研究往往缺乏完全可重复性和可比性所需的公共数据。由于患者相关数据附带的隐私问题和法律要求&#xff0c;数据集往往受到限制。因此&#xff0c;许多算法和模型发表在同一主题上&#xff0c;没有一个标准的基准。因此&#xff0c;本文提出了一个公…...

编程日记 2024/9/23 4:05:04

Spring Boot 集成 Redisson 实现消息队列

包含组件内容 RedisQueue&#xff1a;消息队列监听标识RedisQueueInit&#xff1a;Redis队列监听器RedisQueueListener&#xff1a;Redis消息队列监听实现RedisQueueService&#xff1a;Redis消息队列服务工具 代码实现 RedisQueue import java.lang.annotation.ElementTyp…...

编程日记 2024/9/23 4:02:01

go语言Map详解

Map Go语言中提供的映射关系容器为map&#xff0c;其内部使用散列表&#xff08;hash&#xff09;实现 map是一种无序的基于key-value的数据结构&#xff0c;Go语言中的map是引用类型&#xff0c;必须初始化才能使用。 它提供了高效的查找、插入和删除操作&#xff0c;非常适…...

编程日记 2024/9/23 3:58:57

C++——已知数组a[6]={1,3,5,7,9}；输入一个数值，要求按照现有排序规律将它放入数组当中。

没注释的源代码 #include <iostream> using namespace std; int main() { int a[6]{1,3,5,7,9}; int n,i,j; cout<<"请输入一个数值&#xff1a;"; cin>>n; for(int i0;i<4;i) { if(n<a[i]) { …...

编程日记 2024/9/23 3:53:53

云计算第四阶段---CLOUD Day7---Day8

CLOUD 07 一、Dockerfile详细解析 指令说明FROM指定基础镜像&#xff08;唯一&#xff09;RUN在容器内执行命令&#xff0c;可以写多条ADD把文件拷贝到容器内&#xff0c;如果文件是 tar.xx 格式&#xff0c;会自动解压COPY把文件拷贝到容器内&#xff0c;不会自动解压ENV设置…...

编程日记 2024/9/23 3:52:51

深入解析ThingsBoard与ThingsKit物联网平台的差异

VS 在物联网(IoT)领域&#xff0c;平台的选择对于企业来说至关重要。本文将深入探讨ThingsBoard社区版与ThingsKit企业版这两个物联网平台的差异&#xff0c;帮助读者更好地理解它们的特色和适用场景。 系统相同点 首先&#xff0c;ThingsBoard社区版和ThingsKit企业版都基于…...

编程日记 2024/9/23 3:51:50

五、CAN总线

目录 一、基础知识 1、can介绍 2、CAN硬件电路 3、CAN电平标准 4、CAN收发器芯片介绍 5、CAN帧格式 ① CAN帧种类 ② CAN数据帧 ③ CAN遥控帧​编辑 ④ 位填充 ⑤ 波形实例 6、接收方数据采样 ① 接收方数据采样遇到的问题 ② 位时序 ③ 硬同步 ④ 再同步 ⑤ 波…...

编程日记 2024/9/23 3:47:46

Linux：终端(terminal)与终端管理器(agetty)

终端的设备文件 打开/dev目录可以发现其中有许多字符设备文件&#xff0c;例如对于我的RedHat操作系统&#xff0c;拥有tty0到tty59&#xff0c;它们是操作系统提供的终端设备。对于tty1-tty12使用ctrlaltF*可以进行快捷切换&#xff0c;下面的命令可以进行通用切换。 sudo ch…...

编程日记 2024/9/23 3:46:44

钉钉与MySQL对接集成获取部门列表2.0打通EXECUTE语句

钉钉与MySQL对接集成获取部门列表2.0打通EXECUTE语句 接入系统&#xff1a;钉钉 钉钉是阿里巴巴集团打造的企业级智能移动办公平台&#xff0c;是数字经济时代的企业组织协同办公和应用开发平台。钉钉将IM即时沟通、钉钉文档、钉闪会、钉盘、Teambition、OA审批、智能人事、钉工…...

编程日记 2024/9/23 3:43:41