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

    ENTRYPOINT 两种格式: ENTRYPOINT [“executable”, “param1”, “param2”] ENTRYPOINT command param1 param2 (she ...

  2. 为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式?

    不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式,然而使用了 DOCTYPE,也不一定就能够使文档在所有浏览器中均处于标准模式. DOCTYPE 本身不就是一个“开关”吗?为何在有 DOC ...

  3. 设置android设备时间与pc时间同步的批处理

    新建一个批处理文件 然后输入下面的内容: @echo off echo %date% echo %time% ,%%,%%,%.%,%%,%%,% //通过获取pc时间来设置android设备时间 a ...

  4. golang http/transport 代码分析

    请结合源码阅读,本文只是总结一下,源码里有详细的注释.基于:go1.12.4 http.Client 表示一个http client端,用来处理HTTP相关的工作,例如cookies, redirec ...

  5. 201621123016 《Java程序设计》第十一周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread 1.1 BallR ...

  6. unity2d 动画

    1 资源test.jpg(如下)放入Resources文件夹 2 切割图片 点击图片,在inspector中,选择Texture Type为Sprite(2D and UI),然后点击Sprite E ...

  7. 3DMAX 烘培技术

    烘培是指,把光照信息渲染成贴图,而后把这个烘培后的贴图再贴回到场景中去的技术.烘培技术把光照计算的结果提前写入到了贴图中,因此在实时渲染中不需要进行耗时的光照计算,大大提高了实时渲染的效率. 烘培和渲 ...

  8. 搭建 CDH 版本hive

    搭建一个完整的cdh 的版本,由于涉及的产品和步骤太多,在客户那里部署环境时,很容易出现意外,所以如果只是需要部署一个测试环境来进行验证,我们没有必要完完整整的部署整个cdh.   下面是通过命令行的 ...

  9. PostgreSQL-14-异常值处理

    -- 查看异常值CREATE TABLE outerdata(id int PRIMARY KEY,value numeric); \COPY outerdata FROM 'C:\Users\iHJ ...

  10. jQuery scrollLeft()与scrollTop() 源码解读

    这里的实现也很容易懂,通过jQuery的静态方法each给jQuery的原型添加scrollLeft和scrollTop方法. 这里在取值时它把window和普通的element做了区分 如果是win ...