在上一篇博文中，我为大家介绍了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. javascript 四舍五入

    原生 javascript 中四舍五入的函数 toFixed(n) , n为要保留的小数位数. (0<= n <=20) var num=1.0999; console.log(num.t ...

  2. Jenkins的错误“error fetching remote repo origin”的问题解决

    错误如上,解决方法收集,可以尝试以下方法: http://stackoverflow.com/questions/38391601/jenkins-error-error-fetching-remot ...

  3. ActionScript通用开发框架

    ActionScript 3(简称as)自2006年诞生以来,出现了一大批很优秀框架.就我的知识领域,运用包括pureMVC.pushButton Engine(组件框架).Robotlegs.Ash ...

  4. BaseAdapter的ArrayIndexOutOfBoundsException

    最近写一个listView中多个listItem布局时,convertView缓存及使用,类似微信的聊天界面的listView,报了一个异常: 11-25 15:51:49.076: E/InputE ...

  5. LaTex希腊字母

    Name Symbol Command Alpha $\alpha$ $A$ \alpha A Beta $\beta$ $B$ \beta B Gamma $\gamma$ $\Gamma$ \ga ...

  6. Linux Mysql如何移动MySQL数据库目录位置

      假如要把目录移到/home/data下需要进行下面几步: 1.home目录下建立data目录 cd /home mkdir data 2.把MySQL服务进程停掉: mysqladmin -u r ...

  7. 修改MySQL引擎

    1. 显示MySQL支持的引擎:show engines;

  8. Android - ContentProvider机制

    以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luosheng ...

  9. Javascript 第一阶段 学习使用总结

    JavaScript 是一种轻量级的编程语言.JavaScript 是可插入 HTML 页面的编程代码.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中 ...

  10. c# 字符串编码问题

    一. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte). ...