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

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

news 2026/4/1 0:03:21

引言

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

【Matlab】MATLAB教程：图形属性修改（案例：set(h,‘Color‘,‘red‘)，应用：自定义图形样式）

MATLAB教程：图形属性修改（案例：set(h,Color,red)，应用：自定义图形样式） 在MATLAB数据可视化、实验报告绘图、工程结果展示等场景中，默认绘制的图形往往难以满足个性化需求和规范要求。无论是调整线条颜色、粗细，还是优化坐标轴、图例样式，核心目标都是通过图形属性修…...

编程新知 2026/3/31 22:38:26

毕业设计实战：基于SpringBoot的饮食分享平台设计与实现全攻略

毕业设计实战&#xff1a;基于SpringBoot的饮食分享平台设计与实现全攻略 在开发“饮食分享平台”这套毕设时&#xff0c;我曾因“菜谱信息与趣味答题数据脱节”踩过一个关键坑。初期设计时&#xff0c;我将“菜谱推荐”和“趣味答题”视为两个独立模块&#xff0c;导致用户在浏…...

编程新知 2026/3/31 22:01:36

PADS VX2.7实战指南：Router高效布线与等长设计技巧

1. PADS Router高效布线基础技巧 刚接触PADS Router时&#xff0c;最让我头疼的就是布线效率问题。后来发现&#xff0c;合理设置软件参数和掌握快捷键能极大提升工作效率。在PADS VX2.7中&#xff0c;Router工具的布线功能比Layout更加强大&#xff0c;特别适合处理复杂的高速…...

编程新知 2026/3/31 21:33:04

Omni-Vision Sanctuary 模拟电路设计可视化：与 Multisim 仿真结果结合生成原理图效果图

Omni-Vision Sanctuary 模拟电路设计可视化&#xff1a;与 Multisim 仿真结果结合生成原理图效果图 1. 电子工程师的文档痛点 在电子设计领域&#xff0c;工程师们经常面临一个共同的烦恼&#xff1a;花大量时间完成的电路仿真和分析&#xff0c;最终呈现给团队或客户的文档却…...

编程新知 2026/3/31 21:22:58

springboot+vue基于web的高校网上订餐平台设计系统

目录同行可拿货,招校园代理 ,本人源头供货商系统功能模块分析技术实现要点特色功能扩展项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 系统功能模块分析 后台管理模块 管理员登录与权…...

编程新知 2026/3/31 20:13:48

springboot+vue基于web的社区交互图书管理系统的设计系统

目录同行可拿货,招校园代理 ,本人源头供货商系统功能模块划分关键技术实现数据库设计要点社区交互设计安全防护措施项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 系统功能模块划分 后…...

编程新知 2026/3/31 20:03:34

OpenCV实战：图像亮度、对比度与锐化的智能调节与优化

1. 图像处理基础概念解析 在开始动手实践之前&#xff0c;我们需要先理解几个关键概念。亮度、对比度和锐化这三个参数就像调节电视画面的三个旋钮&#xff0c;每个旋钮都会对图像产生独特的影响。 亮度&#xff08;Brightness&#xff09;就像房间里的灯光开关。调高亮度&…...

编程新知 2026/3/31 19:43:26

从IntelliJ到VSCode：开发体验无缝迁移完全指南

从IntelliJ到VSCode&#xff1a;开发体验无缝迁移完全指南 【免费下载链接】vscode-intellij-idea-keybindings Port of IntelliJ IDEA key bindings for VS Code. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-intellij-idea-keybindings 一、发现迁移痛点&…...

编程新知 2026/3/31 18:15:54

NSSCTF做题记录九 | [HUBUCTF 2022 新生赛]checkin

[HUBUCTF 2022 新生赛]checkin <?php show_source(__FILE__); //高亮显示当前代码 $username "this_is_secret"; //给$username赋值 $password "this_is_not_known_to_you"; //给$password赋值 include("flag.php");//here I chan…...

编程新知 2026/3/31 16:38:19

缠论量化工程化：从痛点突破到智能交易系统构建

缠论量化工程化&#xff1a;从痛点突破到智能交易系统构建 【免费下载链接】chan.py 开放式的缠论python实现框架&#xff0c;支持形态学/动力学买卖点分析计算&#xff0c;多级别K线联立&#xff0c;区间套策略&#xff0c;可视化绘图&#xff0c;多种数据接入&#xff0c;策略…...

编程新知 2026/3/31 16:01:43