服务器之家

服务器之家 > 正文

在Javascript应用程序中执行语音识别

时间:2021-05-07 01:05     来源/作者:前端全栈开发者

在Javascript应用程序中执行语音识别

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

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

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

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

语音识别接口

 

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

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

  1. // 创建一个SpeechRecognition对象 
  2. const recognition = new webkitSpeechRecognition(); 
  3.  
  4. // 配置设置以使每次识别都返回连续结果 
  5. recognition.continuous = true
  6.  
  7. // 配置应返回临时结果的设置 
  8. recognition.interimResults = true
  9.  
  10. // 正确识别单词或短语时的事件处理程序 
  11. recognition.onresult = function (event) { 
  12.   console.log(event.results); 
  13. }; 

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

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

在Javascript应用程序中执行语音识别

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

在Javascript应用程序中执行语音识别

这是此示例的HTML代码:

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  6.     <title>Speech Recognition</title> 
  7.     <script> 
  8.       window.onload = () => { 
  9.         const button = document.getElementById('button'); 
  10.         button.addEventListener('click', () => { 
  11.           if (button.style['animation-name'] === 'flash') { 
  12.             recognition.stop(); 
  13.             button.style['animation-name'] = 'none'
  14.             button.innerText = 'Press to Start'
  15.             content.innerText = ''
  16.           } else { 
  17.             button.style['animation-name'] = 'flash'
  18.             button.innerText = 'Press to Stop'
  19.             recognition.start(); 
  20.           } 
  21.         }); 
  22.  
  23.         const content = document.getElementById('content'); 
  24.  
  25.         const recognition = new webkitSpeechRecognition(); 
  26.         recognition.continuous = true
  27.         recognition.interimResults = true
  28.         recognition.onresult = function (event) { 
  29.           let result = ''
  30.           for (let i = event.resultIndex; i < event.results.length; i++) { 
  31.             result += event.results[i][0].transcript; 
  32.           } 
  33.           content.innerText = result; 
  34.         }; 
  35.       }; 
  36.     </script> 
  37.     <style> 
  38.       button { 
  39.         background: yellow; 
  40.         animation-name: none; 
  41.         animation-duration: 3s; 
  42.         animation-iteration-count: infinite; 
  43.       } 
  44.       @keyframes flash { 
  45.         0% { 
  46.           background: red; 
  47.         } 
  48.         50% { 
  49.           background: green; 
  50.         } 
  51.       } 
  52.     </style> 
  53.   </head> 
  54.   <body> 
  55.     <button id="button">Press to Start</button> 
  56.     <div id="content"></div> 
  57.   </body> 
  58. </html> 

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

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

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

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

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

在Javascript应用程序中执行语音识别

以下是浏览器兼容性表:

在Javascript应用程序中执行语音识别

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

语音识别库

 

有一些开源语音识别库,以下是基于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 对象,该对象定义如下:

  1. var SpeechRecognition = root.SpeechRecognition ||                                      
  2.                         root.webkitSpeechRecognition ||                           
  3.                         root.mozSpeechRecognition ||                           
  4.                         root.msSpeechRecognition ||                           
  5.                         root.oSpeechRecognition; 

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

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

这是此示例的HTML代码:

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  6.     <title>Annyang</title> 
  7.     <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script> 
  8.     <script> 
  9.       window.onload = () => { 
  10.         const button = document.getElementById('button'); 
  11.         button.addEventListener('click', () => { 
  12.           if (button.style['animation-name'] === 'flash') { 
  13.             annyang.pause(); 
  14.             button.style['animation-name'] = 'none'
  15.             button.innerText = 'Press to Start'
  16.             content.innerText = ''
  17.           } else { 
  18.             button.style['animation-name'] = 'flash'
  19.             button.innerText = 'Press to Stop'
  20.             annyang.start(); 
  21.           } 
  22.         }); 
  23.  
  24.         const content = document.getElementById('content'); 
  25.  
  26.         const commands = { 
  27.           hello: () => { 
  28.             content.innerText = 'You said hello.'
  29.           }, 
  30.           'hi *splats': (name) => { 
  31.             content.innerText = `You greeted to ${name}.`; 
  32.           }, 
  33.           'Today is :day': (day) => { 
  34.             content.innerText = `You said ${day}.`; 
  35.           }, 
  36.           '(red) (green) (blue)': () => { 
  37.             content.innerText = 'You said a primary color name.'
  38.           }, 
  39.         }; 
  40.  
  41.         annyang.addCommands(commands); 
  42.       }; 
  43.     </script> 
  44.     <style> 
  45.       button { 
  46.         background: yellow; 
  47.         animation-name: none; 
  48.         animation-duration: 3s; 
  49.         animation-iteration-count: infinite; 
  50.       } 
  51.       @keyframes flash { 
  52.         0% { 
  53.           background: red; 
  54.         } 
  55.         50% { 
  56.           background: green; 
  57.         } 
  58.       } 
  59.     </style> 
  60.   </head> 
  61.   <body> 
  62.     <button id="button">Press to Start</button> 
  63.     <div id="content"></div> 
  64.   </body> 
  65. </html> 

第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时,这里有一些提示:如果您不想在日常生活中倾听,请记住关闭语音识别应用程序。

原文:https://betterprogramming.pub/perform-speech-recognition-in-your-javascript-applications-91367b0d0

作者:Jennifer Fu

原文地址:https://mp.weixin.qq.com/s/gvmQkZj8yHFk5AxSGCOhhA

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
返回顶部