0

0

Web Speech API开发者指南:它是什么以及如何工作

王林

王林

发布时间:2023-04-11 19:22:02

|

1910人浏览过

|

来源于51CTO.COM

转载

​译者 | 李睿

审校 | 孙淑娟

Krea AI
Krea AI

多功能的一站式AI图像生成和编辑平台

下载

Web Speech API是一种Web技术,允许用户将语音数据合并到应用程序中。它可以通过浏览器将语音转换为文本,反之亦然。

Web Speech API于2012年由W3C社区引入。而在十年之后,这个API仍在开发中,这是因为浏览器兼容性有限。

该API既支持短时输入片段,例如一个口头命令,也支持长时连续的输入。广泛的听写能力使它非常适合与Applause应用程序集成,而简短的输入很适合语言翻译。

语音识别对可访问性产生了巨大的影响。残疾用户可以使用语音更轻松地浏览网络。因此,这个API可能成为使网络更友好、更高效的关键。

文本到语音和语音到文本的功能由两个界面处理:语音合成和语音识别。

一、语音识别

在语音识别界面中,用户对着麦克风说话,然后语音识别服务就会根据它自己的语法来检查他所说的话。

API通过首先请求允许通过麦克风访问用户的语音来保护他的隐私。如果使用API的页面使用HTTPS协议,则只请求一次权限。否则,API将在每个实例中询问。

用户的设备可能已经包含了语音识别系统,例如iOS或Android语音的Siri。使用语音识别界面时,将会使用默认系统。在语音被识别之后,它将被转换并作为文本字符串返回。

在“one-shot”语音识别中,只要用户停止说话,识别就会结束。这对于简短的命令很有用,例如如在网页上搜索应用程序测试网站或者打电话。在“continuous”识别中,用户必须使用“停止”按钮人工结束识别。

目前,Web Speech API的语音识别只得到了两种浏览器正式支持:Chrome for Desktop和Android。Chrome需要使用前缀界面。

然而,Web Speech API仍处于实验阶段,规范可能会发生变化。可以通过搜索webkitSpeechRecognition对象来检查当前浏览器是否支持该API。

二、语音识别属性

以下学习一个新函数:语音识别()。

var recognizer = new speechRecognition();

现在检查一下某些事件的回调:

(1)onStart:当语音识别器开始收听和识别语音时,会触发onStart。可以显示消息以通知用户的设备正在收听。

(2)onEnd:onEnd生成一个事件,每次用户结束语音识别时都会触发该事件。

(3)onError:每当发生语音识别错误时,都会使用SpeechRecognitionError界面触发此事件。

(4)onResult:当语音识别对象获得结果时,触发此事件。它返回临时结果和最终结果。onResult必须使用SpeechRecognitionEvent界面。

SpeechRecognitionEvent对象包含以下数据:

(1)results[i]:语音识别结果对象的数组,每个元素代表一个已识别的单词。

(2)resultindex:当前识别索引。

(3)results[i][j]:识别单词的第j个替代词;第一个出现的单词是最可能出现的单词。

(4)results[i].isFinal:一个布尔值,显示结果是临时的还是最终的。

(5)results[i][j].transcript:单词的文本表示。

(6)results[i][j].confidence:结果正确的概率(取值范围从0到1) 。

那么,应该在语音识别对象上配置什么属性?以下来看看。

(1)Continuous vs One-Shot

用户确定是否需要语音识别对象在关闭之前一直听他说话,或者是否只需要它来识别一个简短的短语。其默认设置为“false”。

假设正在使用该技术做笔记,以便与库存跟踪模板集成。需要能够长时间说话,并有足够的时间暂停,而不需要将应用程序送回睡眠状态。可以将continuous设置为true,如下所示:

speechRecognition.continuous = true;

(2)语言

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

图片

希望对象识别什么语言?如果浏览器默认设置为英文,它将自动选择英文。但是,也可以使用地区代码。

此外,可以允许用户从菜单中选择语言:

speechRecognition.lang = document.querySelector("#select_dialect").value;

(3)中期结果

中期结果是指尚未完成或最终的结果。通过将此属性设置为true,可以使对象将临时结果显示为对用户的反馈:

speechRecognition.interimResults = true;

(4)启动和停止

如果已经将语音识别对象配置为“continuous”, 则需要设置开始和停止按钮的onClick属性,如下所示:

JavaScript

1 document.querySelector("#start").onclick = () => {
2
3 speechRecognition.start();
4
5 };
6
7 document.querySelector("#stop").onclick = () => {
8
9 speechRecognition.stop();
10
11 };

这将允许用户控制使用的浏览器何时开始“监听”,何时停止。

因此,在深入了解了语音识别界面、方法和属性之后。现在探索Web Speech API的另一面。

三、语音合成

语音合成也被称为文本到语音(TTS)。语音合成是指从应用程序中获取文本,将其转换成语音,然后从设备的扬声器中播放。

可以使用语音合成做任何事情,从驾驶指南到为在线课程朗读课堂笔记,再到视觉障碍用户的屏幕阅读。

在浏览器支持方面,从Gecko42+版本开始,Web Speech API的语音合成可以在Firefox桌面和移动端使用。但是,必须首先启用权限。Firefox OS2.5+默认支持语音合成;不需要权限。Chrome和Android 33+也支持语音合成。

那么,如何让浏览器说话呢?语音合成的主要控制器界面是SpeechSynthesis,但需要一些相关的界面,例如用于输出的声音。大多数操作系统都有默认的语音合成系统。

简单地说,用户需要首先创建一个SpeechSynthesisUtterance界面的实例。其界面包含服务将读取的文本,以及语言、音量、音高和速率等信息。指定这些之后,将实例放入一个队列中,该队列告诉浏览器应该说什么以及什么时候说。

将需要说话的文本指定给其“文本”属性,如下所示:

newUtterance.text =

除非使用.lang属性另有指定,否则语言将默认为应用程序或浏览器的语言。

在网站加载后,语音更改事件可以被触发。要改变浏览器的默认语音,可以使用语音合成中的getvoices()方法。这将显示所有可用的语音。

声音的种类取决于操作系统。谷歌和MacOSx一样有自己的默认声音集。最后,用户使用Array.find()方法选择喜欢的声音。

根据需要定制SpeechSynthesisUtterance。可以启动、停止和暂停队列,或更改通话速度(“速率”)。

四、Web Speech API的优点和缺点  

什么时候应该使用Web Speech API?这种技术使用起来很有趣,但仍在发展中。尽管如此,还是有很多潜在的用例。集成API可以帮助实现IT基础设施的现代化,而用户可以了解Web Speech API哪些方面已经成熟可以改进。

1.提高生产力

对着麦克风说话比打字更快捷、更有效。在当今快节奏的工作生活中,人们可能需要能够在旅途中访问网页。

它还可以很好地减少管理工作量。语音到文本技术的改进有可能显著减少数据输入任务的时间。语音到文本技术可以集成到音频视频会议中,以加快会议的记录速度。

2.可访问性

如上所述,语音到文本(STT)和文本语音(TTS)对于有残疾或支持需求的用户来说都是很好的工具。此外,由于任何原因而在写作或拼写方面有困难的用户可以通过语音识别更好地表达自己。

这样,语音识别技术就可以成为互联网上一个很好的均衡器。鼓励在办公室使用这些工具也能促进工作场所的可访问性。

3.翻译

Web Speech API可以成为一种强大的语言翻译工具,因为它同时支持语音到文本(STT)和文本语音(TTS)。目前,并不是每一种语言都可用。这是Web Speech API尚未充分发挥其潜力的一个领域。

4.离线功能

一个缺点是API必须要有互联网连接才能正常工作。此时,浏览器将输入发送到它的服务器,然后服务器返回结果。这限制了Web Speech API可以使用的环境。

5.精确度

在提高语音识别器的准确性方面已经取得了令人难以置信的进展。用户可能偶尔还会遇到一些困难,例如技术术语和其他专业词汇或者方言。然而,到2022年,语音识别软件的精确度已经达到了人类的水平。

五、结语

虽然Web Speech API还处于实验阶段,但它可以成为网站或应用程序的一个惊人的补充。从科技公司到市场营销商,所有的工作场所都可以使用这个API来提高效率。只需几行简单的JavaScript代码,就可以打开一个全新的可访问性世界。

语音识别可以使用户更容易更有效地浏览网页,人们期待看到这项技术快速成长和发展!

原文链接:https://dzone.com/articles/the-developers-guide-to-web-speech-api-what-is-it

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

38

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

83

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

97

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

223

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

458

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

169

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

246

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

34

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 7.1万人学习

Django 教程
Django 教程

共28课时 | 5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号