`
JerryWang_SAP
  • 浏览: 1036178 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

JavaScript的语音识别

阅读更多

有没有想过给您的网站增添语音识别的功能?比如您的用户不用点鼠标,仅仅通过电脑或者手机的麦克风发布命令,比如"下拉到页面底部”,或者“跳转到下一页”,您的网站就会执行对应命令。听起来很酷对么?然而为了实现这个功能,必须得让您网站的JavaScript脚本能够识别到这些语音输入。

 

这里介绍一个开源的JavaScript语言输入库,名叫annyang。

Github地址:https://github.com/TalAter/annyang

截至到2018年7月12日,这个github仓库已经有4833个Star了。

 

annyang实际上就是一个只有2KB大小的JavaScript脚本文件,使用起来非常方便。

下面就跟着我一起做一个Hello World应用吧,看看您通过麦克风说话的声音是如何被这个JavaScript库文件识别到的。

新建一个html文件,将下面的代码复制进去。将它部署到您本地的Tomcat或者nodejs服务器上。

<html>

<script src="annyang.min.js"></script>

<script>

if (annyang) {

var commands = {

"Hello": function() {

alert(" I have heard your voice!");

}

};

var commands2 = {

"Bye": function(){

alert("再见!");

}

}

annyang.addCommands(commands);

annyang.addCommands(commands2);

annyang.start();

}

</script>

</html>

我测试用的是Chrome。

当您第一次在浏览器里访问这个网页时,会弹出下面的Chrome对话框,提示您这个应用要使用您电脑上的麦克风。点Allow按钮即可。

 

这个应用有两个地方向您提示它可以接受语音输入。第一处是下图1的红色小圆圈。

 

第二处是一个小的麦克风图标,点击之后,可以设置允许或者禁止麦克风。我们当然是要选择允许啦,否则如何接受语音输入呢?

 

如果您的笔记本电脑本身也有麦克风,可以从这个下拉菜单里选择用笔记本自带的麦克风,还是用外接的麦克风。我用的是后者。

 

现在可以测试了。

 

因为代码里我给Hello这个语音绑定的执行函数是一个alert弹出对话框,所以当我对着麦克风说了一句“Hello"之后,我的浏览器立即弹出了这个对话框。

 

同样,说了"Bye"后,会弹出“再见”。我在响应“Bye”这个语音的函数设置了一个断点,大家通过调用栈也可以观察到annyang的处理逻辑。

 

从annyang的github上能看出,中文也在支持的语音之列,所以大家放心大胆地使用吧!

https://github.com/TalAter/annyang/blob/master/docs/FAQ.md

连粤语都支持,厉害了!

 

更多细节,请查阅annyang的官网。

https://www.talater.com/annyang/

 

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

 

 
 
0
0
分享到:
评论

相关推荐

    Unity3D教程:调用Android语音识别1

    在本篇Unity3D教程中,我们将探讨如何在Unity3D项目中调用Android设备的内置语音识别功能。首先,我们需要了解的是,Android系统已经集成了Google的语音识别服务,因此开发者无需额外安装第三方库即可实现语音识别。...

    JavaScript语音识别Pocketsphinx.js.zip

    Pocketsphinx.js 是一个在浏览器上通过纯 JavaScript 实现语音识别的功能,支持 Chrome 和 Firefox 浏览器。提供录音的功能。特性:100% 纯 JavaScript API,可通过 Web Workers 录制支持 PocketSphinx 所支持的所有...

    pocketsphinx.js-纯JavaScript语音识别插件

    Pocketsphinx.js 是一个在浏览器上通过纯 JavaScript 实现语音识别的功能,支持 Chrome 和 Firefox 浏览器。提供录音的功能。 特性: 100% 纯 JavaScript API, 可通过 Web Workers 录制 支持 PocketSphinx 所...

    浅析如何利用JavaScript进行语音识别

    所谓语音识别就是将你所说的转化成文字。Chrome 浏览器在版本25之后开始对这一特性的支持。这篇文章将会详细的介绍如何使用JavaScript进行语音识别,感兴趣的朋友们可以参考借鉴,下面来一起看看吧。

    JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码.zip

    JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。...

    virtual-girlfriend:JavaScript语音识别的简单示例

    【虚拟女朋友:JavaScript语音识别的简单示例】 在当今的Web开发领域,JavaScript不仅用于页面交互,还扩展到了更复杂的领域,如语音识别。"virtual-girlfriend"项目就是一个很好的例子,它展示了如何利用...

    百度语音识别demo

    在IT领域,语音识别技术是近年来发展迅速的一个分支,它涉及人工智能(AI)和自然语言处理(NLP)。本文将详细解析"百度语音识别demo"的相关知识点,帮助开发者更好地理解和运用这一技术。 首先,我们要明白“百度...

    voice-controllable-scrolling:这是使用javascript语音识别api进行的语音可控滚动

    这是使用javascript语音识别api进行的语音可控滚动。 到目前为止,它遵循11条命令。 命令如下: go up或scroll up =&gt;向上滚动 go down scroll down或scroll down =&gt;向下滚动 go to half =&gt;滚动到页面的一半 scroll...

    讯飞语音识别 HTML5

    讯飞语音识别服务提供了一套完整的JavaScript SDK,允许开发者在网页中嵌入语音识别功能。开发者可以通过调用SDK中的API,设置参数如语言类型、识别率等,实现对用户语音的实时或非实时识别。例如,可以设置`...

    基于Flask Web的中文自动语音识别演示系统,包含语音识别语音合成声纹识别之说话人识别源码+运行说明.zip

    该压缩包文件“基于Flask Web的中文自动语音识别演示系统,包含语音识别语音合成声纹识别之说话人识别源码+运行说明.zip”提供了一个完整的Web应用项目,旨在演示中文语音识别、语音合成以及说话人识别的功能。...

    有语音识别的svg动画网页特效.rar

    例如,JavaScript库如Web Speech API可以用来处理语音识别功能,而SVG动画则可能通过CSS3的`@keyframes`规则或者JavaScript的`requestAnimationFrame`方法来创建。 在实际应用中,开发者需要考虑语音识别的准确性和...

    annyang语音识别.rar

    annyang语音识别是一款基于JavaScript的开源库,专为前端开发者设计,用于实现语音识别功能。在Web应用中集成annyang,可以为用户提供一种无需物理输入设备,只需通过语音交互就能控制网页的便捷方式。这个RAR压缩包...

    微软语音识别网页版demo

    特别是“msvoice.js”文件,很可能是包含了调用微软语音识别API的JavaScript代码,它可能包含了设置API密钥、监听麦克风、发送音频流以及接收并处理识别结果等功能。 在这个demo中,用户可以通过点击按钮启动麦克风...

    前端页面调用百度AI实现语音识别.zip

    在当前的数字化时代,语音识别技术已经广泛应用到各种场景中,包括智能助手、智能家居、车载导航等。在前端开发领域,结合云端API,开发者能够轻松地在网页上实现语音识别功能,为用户提供更加自然和便捷的交互体验...

    AI语音科大讯飞智能api【web端接口调用实现语音识别】webscoket调试试用

    这个过程涉及到人工智能、语音识别技术、WebSocket通信以及JavaScript编程。首先,我们来了解一下科大讯飞的AI语音服务。 科大讯飞是全球领先的语音技术提供商,其智能API提供了丰富的语音处理功能,包括但不限于...

    百度语音识别+合成的Demo

    【百度语音识别+合成的Demo】是一个基于百度AI平台的示例项目,它结合了百度的语音识别和语音合成功能。这个项目可以帮助开发者快速理解并应用百度的语音API,以便在自己的应用或服务中实现语音交互功能。下面将详细...

    ReactNative下的科大讯飞语音库可以进行语音识别与语音合成

    本文将详细探讨如何在React Native项目中集成科大讯飞的语音识别与语音合成功能,以及相关的JavaScript开发和混合移动开发知识。 首先,`React Native`是Facebook推出的一个开源框架,它允许开发者使用JavaScript和...

    html5录音+百度语音实现语音识别

    HTML5录音与百度语音识别是现代网页应用中常见的功能,特别是在教育、聊天、在线客服等领域。这个技术结合使得用户可以通过语音交互,提升了用户体验。以下是对这两个知识点的详细讲解。 **HTML5录音** HTML5的Web...

    phonegap语音识别.rar

    在这个例子中,“MyFirstPhoneGapPlugin”可能包含了一个JavaScript API,用于启动和控制语音识别过程,并将识别结果回传给JavaScript层。 在PhoneGap中实现语音识别的具体步骤可能包括以下几个关键点: 1. 安装...

    利用h5做语音识别

    其中,语音识别是H5提供的一项重要功能,它使得用户可以通过语音与网页进行交互,大大提升了用户体验。这篇博文将深入探讨如何利用H5实现语音识别,并介绍相关工具和技术。 一、Web Speech API H5中的语音识别主要...

Global site tag (gtag.js) - Google Analytics