有没有想过给您的网站增添语音识别的功能?比如您的用户不用点鼠标,仅仅通过电脑或者手机的麦克风发布命令,比如"下拉到页面底部”,或者“跳转到下一页”,您的网站就会执行对应命令。听起来很酷对么?然而为了实现这个功能,必须得让您网站的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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
Pocketsphinx.js 是一个在浏览器上通过纯 JavaScript 实现语音识别的功能,支持 Chrome 和 Firefox 浏览器。提供录音的功能。特性:100% 纯 JavaScript API,可通过 Web Workers 录制支持 PocketSphinx 所支持的所有...
Pocketsphinx.js 是一个在浏览器上通过纯 JavaScript 实现语音识别的功能,支持 Chrome 和 Firefox 浏览器。提供录音的功能。 特性: 100% 纯 JavaScript API, 可通过 Web Workers 录制 支持 PocketSphinx 所...
所谓语音识别就是将你所说的转化成文字。Chrome 浏览器在版本25之后开始对这一特性的支持。这篇文章将会详细的介绍如何使用JavaScript进行语音识别,感兴趣的朋友们可以参考借鉴,下面来一起看看吧。
JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。...
这是使用javascript语音识别api进行的语音可控滚动。 到目前为止,它遵循11条命令。 命令如下: go up或scroll up =>向上滚动 go down scroll down或scroll down =>向下滚动 go to half =>滚动到页面的一半 scroll...
虚拟女朋友一个简单JavaScript语音识别示例。 :laptop: 实时预览: :
对百度语音识别sdk的使用demo.应该可以节省大家一些使用时间。
实现流程 一、 公众号配置 1.JS安全域名配置:登陆微信公众平台:公众号设置 -> 功能设置 -> JS安全域名,域名写到根域名就行,把下载的txt文件放到域名对应的根目录下 ...2、Wxmedia.php 此类是返回语音识别的配置信息
React Native 下的科大讯飞语音库,可以进行语音识别与语音合成
Recordmp3js 腾讯AIlab语音识别接口开发的流式语音识别web版
基于Flask Web的中文自动语音识别演示系统,包含语音识别、语音合成、声纹识别之说话人识别+源码+开发文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 项目...
JavaScript应用实例-语音识别.js
直接下载就能使用,无需更改。在网页上使用js,使用http方式调用百度语音接口,识别音频文件的文字内容。(使用百度的语音识别,百度语音识别,需要提供音频文件,格式为pcm、wav 、avr)
一个很小JavaScript语音识别库,可让您的用户使用语音命令控制您的网站。 annyang没有依赖项,仅2 KB,并且可以根据MIT许可证免费使用和修改。 演示和教程 常见问题解答,技术文档和API参考 你好世界 就像将添加到...
使用web形式实现语音识别
95分毕业项目-基于Java语音识别的老年人防诈骗系统源码.zip95分毕业项目-基于Java语音识别的老年人防诈骗系统源码.zip95分毕业项目-基于Java语音识别的老年人防诈骗系统源码.zip95分毕业项目-基于Java语音识别的老年...
语音识别管理 角色管理 个人信息 前端:后台管理系统采用 vue-element-admin后台集成方案进行二次开发。微信小程序采用 uni-app开发框架。 后端:后台管理模块采用 SpringBoot + Dubbo 构建后端分布式服务,使用 ...
基于语音识别的智能垃圾分类系统是一个使用Python开发的项目,它利用语音识别技术帮助用户正确分类垃圾。这个系统通过听取用户的询问,识别垃圾名称,并指导用户将其放入正确的垃圾桶中。它结合了自然语言处理(NLP...
JS调用百度语音识别接口,只需将utils文件中的api.js的cuid和token换成自己在百度开发平台注册获得的
Artyom.js 是一个语音识别 JavaScript 库。你可以用 Google Chrome 的语音合成和语音识别功能做出一些很厉害的东西出来。你可以在 Web 应用内部开发自己的 Siri、Google Now 或者 Cortana。 标签:Artyom