0

0

详解JS应用程序中如何执行语音识别

青灯夜游

青灯夜游

发布时间:2021-05-21 10:14:35

|

3411人浏览过

|

来源于segmentfault

转载

本篇文章给大家介绍一下在javascript应用程序中执行语音识别的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

详解JS应用程序中如何执行语音识别

语音识别是计算机科学和计算语言学的一个跨学科子领域。它可以识别口语并将其翻译成文本,它也被称为自动语音识别(ASR),计算机语音识别或语音转文本(STT)。

机器学习(ML)是人工智能(AI)的一种应用,它使系统能够自动学习并从经验中进行改进,而无需进行明确的编程。机器学习在本世纪提供了大多数语音识别方面的突破。如今,语音识别技术无处不在,例如Apple Siri,Amazon Echo和Google Nest。

语音识别以及语音响应(也称为语音合成或文本到语音(TTS))由Web speech API提供支持。

在本文中,我们重点介绍JavaScript应用程序中的语音识别。另一篇文章介绍了语音合成。

语音识别接口

SpeechRecognition 是识别服务的控制器接口,在Chrome中称为 webkitSpeechRecognitionSpeechRecognition 处理从识别服务发送的 SpeechRecognitionEventSpeechRecognitionEvent.results 返回一个SpeechRecognitionResultList 对象,该对象表示当前会话的所有语音识别结果。

可以使用以下几行代码来初始化 SpeechRecognition

// 创建一个SpeechRecognition对象
const recognition = new webkitSpeechRecognition();

// 配置设置以使每次识别都返回连续结果
recognition.continuous = true;

// 配置应返回临时结果的设置
recognition.interimResults = true;

// 正确识别单词或短语时的事件处理程序
recognition.onresult = function (event) {
  console.log(event.results);
};

ognition.start() 开始语音识别,而 ognition.stop() 停止语音识别,它也可以中止( recognition.abort)。

当页面正在访问您的麦克风时,地址栏中将显示一个麦克风图标,以显示该麦克风已打开并且正在运行。

1.png

我们用句子对页面说。“hello comma I'm talking period.” onresult 在我们说话时显示所有临时结果。

2.png

这是此示例的HTML代码:



  
    
    
    Speech Recognition
    
    
  
  
    
    

第25行创建了 SpeechRecognition 对象,第26和27行配置了 SpeechRecognition 对象。

当一个单词或短语被正确识别时,第28-34行设置一个事件处理程序。

第19行开始语音识别,第12行停止语音识别。

在第12行,单击该按钮后,它可能仍会打印出一些消息。这是因为 Recognition.stop() 尝试返回到目前为止捕获的SpeechRecognitionResult。如果您希望它完全停止,请改用 ognition.abort()

您会看到动画按钮的代码(第38-51行)比语音识别代码长。这是该示例的视频剪辑:https://youtu.be/5V3bb5YOnj0

3.gif

以下是浏览器兼容性表:

4.png

网络语音识别依赖于浏览器自己的语音识别引擎。在Chrome中,此引擎在云中执行识别。因此,它仅可在线运行。

Pascal基础教程 Pascal入门必备基础教程 CHM版
Pascal基础教程 Pascal入门必备基础教程 CHM版

无论做任何事情,都要有一定的方式方法与处理步骤。计算机程序设计比日常生活中的事务处理更具有严谨性、规范性、可行性。为了使计算机有效地解决某些问题,须将处理步骤编排好,用计算机语言组成“序列”,让计算机自动识别并执行这个用计算机语言组成的“序列”,完成预定的任务。将处理问题的步骤编排好,用计算机语言组成序列,也就是常说的编写程序。在Pascal语言中,执行每条语句都是由计算机完成相应的操作。编写Pascal程序,是利用Pasca

下载

语音识别库

有一些开源语音识别库,以下是基于npm趋势的这些库的列表:

1. Annyang

Annyang是一个JavaScript语音识别库,用于通过语音命令控制网站。它建立在SpeechRecognition Web API之上。在下一节中,我们将举例说明annyang的工作原理。

2. artyom.js

artyom.js是一个JavaScript语音识别和语音合成库。它建立在Web语音API的基础上,除语音命令外,它还提供语音响应。

3. Mumble

Mumble是一个JavaScript语音识别库,用于通过语音命令控制网站。它建立在SpeechRecognition Web API之上,这类似于annyang的工作方式。

4. julius.js

Julius是面向语音相关研究人员和开发人员的高性能,占用空间小的大词汇量连续语音识别(LVCSR)解码器软件。它可以在从微型计算机到云服务器的各种计算机和设备上执行实时解码。Julis是使用C语言构建的,而julius.js是Julius自以为是JavaScript的移植版。

5.voice-commands.js

voice-commands.js是一个JavaScript语音识别库,用于通过语音命令控制网站。它建立在SpeechRecognition Web API之上,这类似于annyang的工作方式。

Annyang

Annyang初始化一个 SpeechRecognition 对象,该对象定义如下:

var SpeechRecognition = root.SpeechRecognition ||                                     
                        root.webkitSpeechRecognition ||                          
                        root.mozSpeechRecognition ||                          
                        root.msSpeechRecognition ||                          
                        root.oSpeechRecognition;

有一些API可以启动或停止annyang:

  • annyang.start:使用选项(自动重启,连续或暂停)开始监听,例如 annyang.start({autoRestart:true,Continuous:false})
  • annyang.abort:停止收听(停止SpeechRecognition引擎或关闭麦克风)。
  • annyang.pause:停止收听(无需停止SpeechRecognition引擎或关闭麦克风)。
  • annyang.resume:开始收听时不带任何选项。

这是此示例的HTML代码:



  
    
    
    Annyang
    
    
    
  
  
    
    

第7行添加了annyang源代码。

第20行启动annyang,第13行暂停annyang。

Annyang提供语音命令来控制网页(第26-42行)。

第27行是一个简单的命令。如果用户打招呼,页面将回复“您说‘你好’。”

第30行是带有 splats 的命令,该命令会贪婪地捕获命令末尾的多词文本。如果您说“hi,爱丽丝e”,它的回答是“您向爱丽丝致意。”如果您说“嗨,爱丽丝和约翰”,它的回答是“您向爱丽丝和约翰打招呼。”

第33行是一个带有命名变量的命令。一周的日期被捕获为 day,在响应中被呼出。

第36行是带有可选单词的命令。如果您说“黄色”,则将其忽略。如果您提到任何一种原色,则会以“您说的是原色名称”作为响应。

从第26行到第39行定义的所有命令都在第41行添加到annyang中。

... ...

结束

我们已经了解了JavaScript应用程序中的语音识别,Chrome对Web语音API提供了最好的支持。我们所有的示例都是在Chrome浏览器上实现和测试的。

在探索Web语音API时,这里有一些提示:如果您不想在日常生活中倾听,请记住关闭语音识别应用程序。

更多编程相关知识,请访问:编程视频!!

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

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

精品课程

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

共58课时 | 3.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

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

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