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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
JavaScript的语音识别相关推荐
- AI技术驱动下的语音识别:让语音交互更加自然、智能
JavaScript的语音识别是一种将语音转换为文本的技术.它可以应用于许多领域,包括智能家居.智能助手和自然语言处理等. 语音识别的基本原理是将语音信号转换为可以被计算机理解的文本.这个过程可以分为 ...
- HTML5为输入框添加语音输入功能
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...
- html5输入框增加语音,为任意输入框添加语音输入功能
最近大家是否也发现了,百度谷歌等好几个搜索引擎的输入框都有一个语音图标按钮了呢?其实这个功能的技术没有那么高深的,这个技术的实现其实就是HTML5里面的一个标签而已,,点击麦克风就能够进行语音识别了. ...
- 2016 年度开源中国新增开源软件排行榜 TOP 100
1.iBase4J:Java 开源框架整合 iBase4J 是基于 Java 的开源框架搭建的分布式系统架构. 使用 Maven 对项目进行模块化管理,提高项目的易开发性.扩展性. 系统包括三个模块: ...
- H5实现输入框添加语音功能的方法详解
其实很简单,语音识别是html5的基本功能,它的用法是 1 <input type="text" speech x-webkit-speech /> 如果喜欢XHTML ...
- 这一个月的可能用到的便签
Bookmarks 书签栏 linux 鳥哥的 Linux 私房菜 -- 鳥哥的 Linux 私房菜 首頁 ubuntu 下安装unity3d游戏开发平台_百度经验 在 Ubuntu 16.04上,安 ...
- html h5 php 语音录入,H5添加语音输入功能-
这次给大家带来H5添加语音输入功能,H5添加语音输入功能的注意事项有哪些,下面就是实战案例,一起来看一下. 这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实 ...
- html h5 php 语音录入,html5在输入框添加语音输入功能
[导读] 这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法.大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了其实很简单,语音识别是 ...
- HTML5为输入框添加语音输入功能的实现方法
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...
最新文章
- 英文书《用unreal来学习c++》_用机器学习来提升你的用户增长:第四步,客户流失预测
- 程序员面试题精选100题(36)-在字符串中删除特定的字符[算法]
- 新会计科目的编号及内容
- angularjs控制器之间的数据共享与通信
- 免费!200块全志XR806开源鸿蒙开发板试用
- 【AI视野·今日CV 计算机视觉论文速览 第233期】Tue, 3 Aug 2021
- 原生js实现浏览器全屏和退出全屏
- Selenium UI自动化测试(五)WebDriver控制浏览器的操作
- 带有数据库的动态级联菜单
- 用PHP编写提供性别的发法,第6节 Laravel-通过模型处理性别
- linux 用户操作相关命令
- 呆瓜半小时入门python数据分析
- 手机uc怎么放大页面_怎么选择大功率手机信号放大器?
- 电源层和地线层完整性规则_射频电路设计实例以及一些经常遇见的问题
- 华为网络设备加固各种基线命令配置
- java极简使用FastFDFS文件服务器上传图片
- 树莓派中的 IM 私有云支持多少并发?
- 锐龙r7 5800h和酷睿i7 11800h性能差多少 锐龙r75800h和i711800h跑分
- Web:移动商城首页的页眉和页脚的布局和flex项目三个属性
- UISwitch - 开关按钮 的使用详解
热门文章
- 简单说说Java程序和Android开发框架
- Django(part11)--利用UUID传递参数
- 网络编程(part6)--OSI七层模型及四层模型(TCP/IP)
- created不能异步_mpvue里created里异步请求结果,如何在beforeMount里获取到呢
- 利用Python实现数据偏移
- SAP UI5 数据绑定中的工厂函数
- 使用 ABAP 手动解析包含二进制文件的 multipart/form-data 数据时遇到的问题
- SAP Fiori 应用的本地 sandbox Launchpad - 出于测试用途
- SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
- SAP UI5 OData, annotation这些设计的意义