在上一篇博文中，我为大家介绍了myvoix.js中的smart learning模块，以及何如使用该功能。（myvoix.js的源码地址会在每一篇文章末尾放出）

　　文本将拓展 Chrome下的语音控制框架MyVoix.js使用篇（二） 中的实例（没看过的同学请猛戳链接），具象地介绍smart learning模块的使用。在之前的实例中，我们通过语音输入，让 Hello My Voix 标题变化成各种颜色， 并且通过预存指令来增加语音指令的识别率。在本文中将去除预存指令这一块，通过smart learning模块来接收用户不同口音的发音。

　　首先，我们增加了一个按钮，用来控制smart learning的开启关闭，还有一个标签用来记录smart learning模块的运行情况。

　　界面代码和截图如下：

 <body>

     <h1>Hello My Voix</h1>

     <input type='button' value="start" />

     <p>0</p>

 </body>

　　

　　本例中，我们仅对'red'一词进行smart learning的测试，减少UI代码的逻辑复杂性。读者在明白smart learning使用方法后，可自行创建完善的UI。

　　本页面玩法如下：

　　1）点击"start"按钮， 开启smart learning。 这时候用户的语音输入都会被smart learning关联到red一词上。"start"按钮会变成"stop"按钮。

　　2）每次用户有语音输入，按钮下方的数字都会+1。

　　3）点击"stop"按钮， 关闭smart learning。 按钮下方计数会清0，用户再进行语音输入的时候，就会使标题变色。

　　附上javascript部分代码：

 window.onload=function(){

     var _myVoix = new MyVoix(undefined,undefined,true),

         _title=document.getElementsByTagName('H1')[0],

         _btn=document.getElementsByTagName('INPUT')[0],

         _tag = document.getElementsByTagName('P')[0],

         _colors=['red','black','blue','green','yellow'];

     _myVoix.start();

     for(var i=0,l=_colors.length;i<l;i++){

         (function(i){

             _myVoix.bind(_colors[i],function(){

                 _title.style.color=_colors[i];

             });

         })(i);

     }

     _btn.onclick=function(){

         if(_btn.value==='stop'){

             _tag.innerHTML= '0';

             _myVoix.CurrentLearning = undefined;

             _btn.value='start';

         }else{

             _myVoix.CurrentLearning = 'red';

             _btn.value='stop';

         }

     };

     _myVoix.onLearning=function(){

         _tag.innerHTML= +_tag.innerHTML+1;

     };

 };

　　有了代码，明白了页面的功能，我们就可以简单的测试了。建议各位同学打开控制台监控语音的输入。

　　

　　如图所示，点击start按钮后，我们输入了5个语音指令，分别被google解析成了'red','ride','ride','bento','red'。然后我们点击stop按钮，再次输入语音指令，当google把我们的输入解析成'ride','bento'的时候，我们的标题也会变红。

　　Smart learning的本质，其实就是关联一组命令到一个语音指令。所以在实际应用中，我们还可以使用smart learning来让用户自定义语音指令。

　　

　　上图中，我将hi指令关联到了red指令，对着话筒说句hi，就让标题变红了。

　　到此为止，同学们应该已经能够使用myvoix.js开发一些简单的应用了。在本系列之后的文博中，我会为大家解析myvoix.js的数据结构，进步一介绍myvoix的精髓所在。

　　myvoix源码地址

　　转发请注明出处：http://www.cnblogs.com/Arthus/p/3708502.html

Chrome下的语音控制框架MyVoix.js使用篇（四）的更多相关文章

  1. Chrome下的语音控制框架MyVoix.js使用篇（三）

    上篇文末已经提及,google分析出的单词可能和大家预想的输入有差别.上文我们通过预先绑定多个语音指令,权益地解决了这个问题.在这一章,我将介绍myvoix.js框架自带的smart learning ...

  2. Chrome下的语音控制框架MyVoix.js使用篇（一）

    日前因工作需求,着手研究了语音识别技术,发现github上有网友发布了一款叫做voix.js的javascript框架.在拜读voix.js的源码后发现了不少问题,于是自己写了一款语音识别框架MyVo ...

  3. Chrome下的语音控制框架MyVoix.js使用篇（二）

    上一篇博文中,初步介绍了MyVoix.js的基本功能,这次我们将演示一个完整的实例. 先上代码 <!DOCTYPE HTML> <html> <head> < ...

  4. 关于 IE firefox Chrome下的通过用js 关闭窗口的一些问题

    首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的,原因在于: ~~~ie可直接<button onclick="windo ...

  5. 语音控制的tab选项卡

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 ladies and 乡亲们,程序猿同志们,周末仍然坚守工作岗位,或者学习不辍的童鞋们,福音来了. 语音识别高不高端.难不难? 今天给大 ...

  6. H5案例分享：JS手势框架 —— Hammer.js

    JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...

  7. OMCS ——卓尔不群的网络语音视频框架

    作为.NET平台上的开发人员,要开发出一个像样视频聊天系统或视频会议系统,非常艰难,这不仅仅是因为.NET对多媒体的支持比较有限,还因为网络语音视频这块涉及到了很多专业方面的技术,而.NET在这些方面 ...

  8. 一款很便捷很实用的框架——vue.js

    Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...

  9. Web前端三大框架_angular.js 6.0（二）

    Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0  1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...

随机推荐

  1. PS：改装店收的是友情价，包安装十五个毛主席。

    糟糠之妻下堂,娇俏公主上位--更换宝马三系座椅作业 - 切诺基 Jeep家族 越野e族论坛 越野/SUV/旅行/赛事/改装/互动中心         PS:改装店收的是友情价,包安装十五个毛主席.

  2. linux系统目录介绍

    目录/文件 用途 来源 / /处于Linux文件系统树形结构的最顶端,它是Linux文件系统的入口,所有的目录.文件.设备都在/之下. - /bin 该目录存放着系统最常用的最重要的命令,相当于DOS ...

  3. Column count of mysql.proc is wrong. Expected 20, found 16. Created with MySQL 50096, now running 50173.

    IDEA链接mysql提示 Column count of mysql.proc is wrong. Expected 20, found 16. Created with MySQL 50096, ...

  4. lesson9:分布式定时任务

    在实际的开发过程中,我们一定会遇到服务自有的定时任务,又因为现在的服务都是分布式的,但是对于定时任务,很多的业务场景下,还是只希望单台服务来执行,网上有很多分布式定时任务的框架,各位如感兴趣,可以自行 ...

  5. 设计模式19---设计模式之状态模式（State）（行为型）

    1.场景模拟 考虑一个在线投票的应用,分为四种情况 正常投票 正常投票以后还继续重复投票 用户恶意投票 黑名单用户 2.不用模式的解决方案 package demo17.state.example1; ...

  6. OpenRisc-41-or1200的cache模块分析

    引言 为CPU提供足够的,稳定的指令流和数据流是计算机体系结构设计中两个永恒的话题.为了给CPU提供指令流,需要设计分支预测机构,为了给CPU提供数据流,就需要设计cache了.其实,无论是insn还 ...

  7. SKPhysicsJointSliding类

    继承自 NSObject 符合 NSCoding(SKPhysicsJoint)NSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit. ...

  8. Max retries exceeded with ur

    requests模块在抓取网页时抛出ConnectionError异常,Max retries exceeded with url 主要搜下 "Caused by <class 'so ...

  9. Eclipse中Java文件图标由实心J变成空心J的问题

    在eclipse中空心J的java文件,表示不被包含在项目中进行编译,而是当做资源存在项目中.例如 当是单个文件为空心J的时候 1.右击该文件 -- >BuildPath -->Inclu ...

  10. Android（java）学习笔记257：JNI之helloword案例（利用NDK工具）

    1.逻辑思路过程图: 2.下面通过一个HelloWorld案例来说明一下JNI利用NDK开发过程(步骤) 分析:我们在Win7系统下编译的C语言代码,我们知道C语言依赖操作系统,不能跨平台,所以我们要 ...