有没有想过给您的网站增添语音识别的功能？比如您的用户不用点鼠标，仅仅通过电脑或者手机的麦克风发布命令，比如"下拉到页面底部”，或者“跳转到下一页”，您的网站就会执行对应命令。听起来很酷对么？然而为了实现这个功能，必须得让您网站的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. 使用Swing组件实现简单的进制转换

    请编写图像界面程序, 用户在第一文本行输入数字, 有三个按钮,分别是计算2进制,8进制,16进制, 点击其中一个按钮,第一个文本行中的数据转换为相应进制的数显示在第二个文本行中. import jav ...

  2. HDU-2616

    Kill the monster Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. HDOJ-1412(set)

    {A} + {B} Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  4. 理解复杂的const和typedef和指针的关系

    // container.cpp : 定义控制台应用程序的入口点. //   #include "stdafx.h" #include<iostream> #inclu ...

  5. 2 手写Java LinkedList核心源码

    上一章我们手写了ArrayList的核心源码,ArrayList底层是用了一个数组来保存数据,数组保存数据的优点就是查找效率高,但是删除效率特别低,最坏的情况下需要移动所有的元素.在查找需求比较重要的 ...

  6. Apple Mach-O Linker Warning 警告解决办法

    此警告解决办法: 项目名字 -> targets -> Build Settings -> search path

  7. 1118 Birds in Forest （25 分)

    Some scientists took pictures of thousands of birds in a forest. Assume that all the birds appear in ...

  8. MongoDb 抛出"Error retrieving nonce"异常

    MongoDb在读取一个数据时抛出此异常, google之后也是只有源码没有任何相关结果, 考虑到之前同样的Db下不同的Collection没有发现此问题, 对比之后发现出错的url为: mongod ...

  9. Validation（3）--全局参数异常校验捕获及返回XML解决

    @RestControllerAdvice原创直接上代码,后面再说怎么用1.这个是一个Form,用来接收参数的,一个简单的NotEmpty注解校验,merchantName这个参数是必传的: pack ...

  10. Java基础 使用Properties类