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

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

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

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

　　界面代码和截图如下：

1 <body>

2     <h1>Hello My Voix</h1>

3     <input type=‘button‘ value="start" />

4     <p>0</p>

5 </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部分代码：

 1 window.onload=function(){

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

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

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

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

 6         _colors=[‘red‘,‘black‘,‘blue‘,‘green‘,‘yellow‘];

 7     _myVoix.start();

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

 9         (function(i){

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

11                 _title.style.color=_colors[i];

12             });

13         })(i);

14     }

15

16     _btn.onclick=function(){

17         if(_btn.value===‘stop‘){

18             _tag.innerHTML= ‘0‘;

19             _myVoix.CurrentLearning = undefined;

20             _btn.value=‘start‘;

21         }else{

22             _myVoix.CurrentLearning = ‘red‘;

23             _btn.value=‘stop‘;

24         }

25     };

26

27     _myVoix.onLearning=function(){

28         _tag.innerHTML= +_tag.innerHTML+1;

29     };

30 };