MyVoix2.0.js 源碼分析 WebSpeech與WebAudio篇

標籤：des   style   blog   http   color   java   使用   strong   

楔 子

　　隨著移動互連網時代的開啟，各種行動裝置走進了我們的生活。無論是日常生活中人手一部的手機，還是夜跑者必備的各種智能腕帶，亦或者是充滿未來科技感的google glass云云，它們正漸漸改變著我們的生活習慣以及使用者互動習慣。觸控螢幕取代了實體按鍵，Siri開始慢慢釋放我們的雙手，而leap motion之類的硬體更是讓我們徹底不需要接觸IT裝置便能通過手勢控制它們。在這樣的大背景下，前端的互動將涉及越來越多元的交叉學科，我們正如十幾年前人們經曆Css的誕生一樣，見證著一場帶動整個行業乃至社會的變革。

 

放下IE6正如你放下table布局

　　如果現今你的工作還只是每天嚴謹地去相容IE6，那麼是時候起身遙望身邊的風景了，HTML5已經遠遠不只是那些漸層和圓角了。這篇博文中，我會像大家介紹Web Speech和Web Audio兩組API，這是MyVoix.js架構的核心組成部分，在早前好幾個版本的chrome這就已經實現，你可以通過webkit首碼調用他們。

Web Speech

　　WebSpeech API是由Speech API Community Group發布，主要功能是將語音輸入轉換成文字，如果你能加上一個語義分析的伺服器，那它就是一個Siri。你也可以簡單地把它理解成一個可程式化的input語音輸入框（如下代碼）。

<input type=”text” x-webkit-speech lang=”zh-CN” />

　　在Siri剛剛出世的那個年代，上面這行代碼就是前端界讓屌絲變高富帥的利器，老闆才不知道你才寫了一行代碼就搞出一個語音輸入框（偷偷在input上加過x-webkit-speech的同學們請點贊）。但是，僅僅一個輸入框標籤顯然不能滿足程式員們那熊熊燃燒對代碼的控制欲，於是Web Speech應運而生。

　　再回到代碼，要使用webSpeech API我們首先要建立一個window.webkitSpeechRecognition對象。

1 var _rec =new window.webkitSpeechRecognition();2     _rec.continuous=true;3     _rec.interimResults=false;4     _rec.lang=‘en-US‘;5     _rec.maxAlternatives=1;

　　為了大家看的清楚，這裡我稍稍修改了MyVoix中的源碼。可以看到建立SpeechRecognition執行個體後，有幾個參數需要我們配置。

　　continuous：如果置為false,那麼當執行個體start之後，若沒有輸入或者輸入錯誤就會立刻返回。這裡需要等到有意義的輸入才返回，所以我們置為true。

　　interimResults：如果設定為true，那麼在onresult的時候就會不斷有分析過程中的單詞返回。這裡只需要最後的分析結果，所以置為false。

　　lang：這個是語言，大家應該都看的懂。

　　maxAlternatives：設定的是每個result最大的SpeechRecognitionAlternatives。

　　接下來我們調用執行個體的start方法就會開啟SpeechdRecognition的監聽。但是在此之前還需要指定執行個體的onresult事件，語音分析完成後的單詞會傳入這個方法。

 1 _rec.onresult=function(eve){ 2     var len = eve.results.length, 3         i = eve.resultIndex, 4     j = 0, 5     listeners, 6     command; 7     for (i; i < len; i += 1) { 8         if (eve.results[i].isFinal) { 9         // get words10         command = eve.results[i][0].transcript.replace(/^\s+|\s+$/g, ‘‘).toLowerCase();11         if(console.log){12             console.log(eve.results[i][0].transcript);   13         }   14         //your code here....       15     }16     }17 };18 _rec.start();            

　　MyVoix中對於單詞事件的綁定有自己的架構，之後的博文有機會會詳述。

Web Audio

      搞定了語音辨識，接下來我們就需要獲得麥克風的輸入訊號，以便實現MyVoix中的繪製波形功能。如果你用javascript調用過網路攝影機，那你一定用過navigator.webkitGetUserMedia這個東西，Web Audio中擷取麥克風的音來源資料就需要用到它。先看一下MyVoix中的源碼：

 1 navigator.webkitGetUserMedia({audio:true},function(e){ 2               var context = new webkitAudioContext(), 3               javascriptNode = context.createScriptProcessor(2048, 1, 1), 4            audioInput = context.createMediaStreamSource(e), 5            analyser = context.createAnalyser(), 6            splitter = context.createChannelSplitter(); 7            analyser.smoothingTimeConstant = 0.3; 8            analyser.fftSize = 1024;              9            audioInput.connect(splitter);10            splitter.connect(analyser,0,0);11            analyser.connect(javascriptNode);12            javascriptNode.connect (context.destination); 13                             14     javascriptNode.onaudioprocess = function(e) {        15                       var array =  new Uint8Array(analyser.frequencyBinCount);16                       analyser.getByteFrequencyData(array);17                       var average = me.getAverageVolume(e.inputBuffer.getChannelData (0));18                      if (average > 0) {19                              me.changeNoise(average);20                           me.changeFrequence(average);21                      }22     }23 },function(){});

　　初看之下，和WebGL有點類似，你需要連結一堆堆的東西。進一步分析代碼：

navigator.webkitGetUserMedia({audio:true},function(e){    //success callback    //... },function(){    //error callback    //... };

　　第一步使用webkitGetUserMedia對象調用本地麥克風，主要代碼在成功回呼函數中實現。

var context = new webkitAudioContext(),    audioInput = context.createMediaStreamSource(e);

　　之後我們需要建立一個webkitAudioContext執行個體,通過該執行個體可以建立許多有用的元件。這裡通過createMediaStreamSource方法和getUserMedia成功回呼函數中的參數可以建立一個輸入源。 通過一層層的傳遞可以最終串連到context.destination這個輸出位置。我們簡單過一下MyVoix中用到的幾個節點：

　　analyser:這個一看就是分析音源用的，具體一般用在聲音可視化上。

　　splitter:此節點用以聲道轉換，在MyVoix中我們用它把音源變成了左右兩個聲道。

　　javascriptNode：這個節點我們用來進行javascript層級的監聽處理。通過onaudioprocess函數，在每次聲音完成採樣的時候，調用我們繪製波形的函數，並最終通過它串連到輸出端。

　　在MyVoix2.0中，大致就只用到了以上幾個AudioContext創造的節點。通過類似的方法加入其他節點，Web Audio還可以實現聲音在3D空間中定位播放等功能。

　

尾 聲

　　本文介紹了在MyVoix中用到的兩個核心的技術，通過這篇博文希望大家對語音技術在html端的實現有大致的瞭解。我們在園子裡寫作，不用像魯迅先生一樣戰鬥，卻也盼著技術推進這個時代。

 

      myvoix源碼地址

　　轉寄請註明出處：http://www.cnblogs.com/Arthus/p/3889457.html