有没有想过给您的网站增添语音识别的功能？比如您的用户不用点鼠标，仅仅通过电脑或者手机的麦克风发布命令，比如"下拉到页面底部”，或者“跳转到下一页”，您的网站就会执行对应命令。听起来很酷对么？然而为了实现这个功能，必须得让您网站的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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

JavaScript的语音识别的更多相关文章

  1. HTML5为输入框添加语音输入功能

    这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...

  2. 2016 年度开源中国新增开源软件排行榜 TOP 100

    2016 年度开源中国新增开源软件排行榜 TOP 100 2016 年度开源中国新增开源软件排行榜 TOP 100 新鲜出炉!本榜单根据 2016 年开源中国新收录的 3030 款软件的关注度和活跃度 ...

  3. JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

    JavaScript资源大全中文版(Awesome最新版)   目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...

  4. JavaScript资源大全

    目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 模板引擎 数据可视化 编辑器 UI 输入 日历 选择 文件上 ...

  5. Julius JS – 最流行的网页语音识别库

    JuliusJS 是用于在网页中的语音识别库.这是 Julius(由日本京都大学和日本IPA联合开发的一个实用高效双通道的大词汇连续语音识别引擎)的 JavaScript 实现.它实时侦听用户的语音并 ...

  6. 极客DIY：制作一个可以面部、自主规划路径及语音识别的无人机

    引言 现在大部分无人机厂商都会为第三方开发者提供无人机API接口,让他们更容易地开发无人机飞行控制应用程序,让无人机想怎么玩就怎么玩.有的API接口可以帮助开发者开发基于Web版的APP.手机APP甚 ...

  7. redis pub/sub 实战: 微信语音识别

    2015年5月22日 20:20:20 星期五 效果: 这边对微信说话,  浏览器端及时显示语音识别的文字 注意: 在连接socket.io时, 按下浏览器f12, 如果一直有请求不断的刷, 说明so ...

  8. Awesome Javascript(中文翻译版)

    [导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架 ...

  9. 【Recorder.js+百度语音识别】全栈方案技术细节

    项目中需要利用百度语音接口在Web端实现语音识别功能,采用了这样的技术方案,但实现时遇到了很多问题,发现网上大部分文章都只是在详解官方提供的example示例,对实际开发没有提供什么有价值的建议,而r ...

随机推荐

  1. Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法

    40.路由_Fluro的全局注入和使用方法 路由注册到顶层,使每个页面都可以使用,注册到顶层就需要在main.dart中 main.dart注册路由 注入 onGenerateRoute是Materi ...

  2. 1-2关键字 & 2-1什么是变量

    2-1什么是变量 驼峰第一个字母首字母小写后面字母首字母大写 Pascal命名规范:

  3. 如何在.net项目中使用全局程序集GAC

    在解决已有.net网站问题过程中(之前的同事写的),发现出现dll不存在的情况,build报错 在bin目录下找不到该dll,后来发现是全局程序集,存储在C:\Windows\assembly目录下 ...

  4. 移动端UI资源

    1.Flat UI Free http://designmodo.github.io/Flat-UI/ 2.POP 原型工具 http://mobilehub.io/products/pop 3.ei ...

  5. Spring Boot 学习系列（09）—自定义Bean的顺序加载

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Bean 的顺序加载 有些场景中,我们希望编写的Bean能够按照指定的顺序进行加载.比如,有UserServ ...

  6. POJ1011【判重剪枝】

    题意: 给你一堆棒子,这些棒子是你从一堆一样的棒子折断而来的, 现在你忘记了是从那一堆一样的棒子的长度,让你写一个程序,求最短的长度. 思路: 首先这个棒长肯定是和的约数,且大于最大值. 然后是sor ...

  7. 解决MySql报错：1130 - Host 'xxx' is not allowed to connect to this MySQL server的方法

    发现问题 使用Navicat连接MySql数据库时,未能成功,提示信息如下图: 这个错误提示已经很明确了,"不允许主机'desktop-teat9ob'连接到此mysql服务器", ...

  8. uoj#268. 【清华集训2016】数据交互（动态dp+堆）

    传送门 动态dp我好像还真没咋做过--通过一个上午的努力光荣的获得了所有AC的人里面的倒数rk3 首先有一个我一点也不觉得显然的定理,如果两条路径相交,那么一定有一条路径的\(LCA\)在另一条路径上 ...

  9. P5137 polynomial（分治）

    传送门 神仙--这题有毒-- 一直在那里考虑没有逆元怎么办然后考虑解exgcd巴拉巴拉 最后只好看题解了 而且这题龟速乘都不行--得用代码里那种叫人半懂不懂的方式取模-- //minamoto #in ...

  10. 2.Python基础认识(格式化输出,while语句,运算符,编码,单位转化)

    Python基础认识 1.字符串的格式化初识及占位符的简单应用 字符串的格式化 按照既定的要求进行有规定排版的一种输出方式. #我们想要输出的格式如下: ----------------------- ...