上一篇博文中，初步介紹了MyVoix.js的基本功能，這次我們將演示一個完整的實例。
先上代碼
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>MyVoix</title> 6 <script type="text/javascript" src='js/myvoix.js'></script> 7 <script type="text/javascript"> 8 window.onload=function(){ 9 var _myVoix = new MyVoix(undefined,undefined,true), 10 _title=document.getElementsByTagName('H1')[0], 11 _colors=['red','black','blue','green','yellow']; 12 _myVoix.start(); 13 for(var i=0,l=_colors.length;i<l;i++){ 14 (function(i){ 15 _myVoix.bind(_colors[i],function(){ 16 _title.style.color=_colors[i]; 17 }); 18 })(i); 19 } 20 }; 21 </script> 22 </head> 23 <body> 24 <h1>Hello My Voix</h1> 25 </body> 26 </html>
為了讀者方便，代碼都寫在一個文檔中。大家只需要注意引用myvoix.js的位置即可。
用Chrome打開網頁（必須把文件放在服務器上，用url地址打開，如http://localhost/myvoix.html）。瀏覽器首先會提示你‘想要使用您的麥克風’，這個時候當然是‘允許’了。
值得一提的是，如果你不小心選擇了‘拒絕’，下次打開網頁的時候Chrome是會默認禁止該站點訪問麥克風，不會再出現提示。挽救的方法就是在 設置->高級設置->內容設置->媒體->例外情況管理中 進行設置。
配置完畢，開始測試我們的網頁。這段代碼的功能很簡單，就是當偵測到你說'red','black','blue','green','yellow'的時候，把Hello My Voix的顏色做對應的變化。當然谷歌服務器的反應可能不是特別快。這里有個小技巧：打開你的控制台，myvoix.js會在控制台輸出每一個解析出的單詞。需要注意單詞都是小寫的。
當然，每個人的發音不可能都很標准，chrome可能會檢測到一些出乎你意料的結果，如下圖。
說了那么多次’red‘才被解析出，是不是很有挫敗感？ 這里我們可以事先統計一些發音相近的單詞,通過myvoix的數組綁定功能，為這些單詞都綁定同一個事件。
_myVoix.bind(['reddit','rad','reddit','red'],function(){
_title.style.color='red';
});
再試試，解析成功率是不是變高了？
當然，這只是權益之計，開發程序的時候，我們不可能統計所有人的發音，下一章，我們將介紹如何利用myvoix中的smart learning模塊，實現定制化的語音識別。