有沒有想過給您的網站增添語音識别的功能?比如您的使用者不用點滑鼠,僅僅通過電腦或者手機的麥克風釋出指令,比如"下拉到頁面底部”,或者“跳轉到下一頁”,您的網站就會執行對應指令。聽起來很酷對麼?然而為了實作這個功能,必須得讓您網站的JavaScript腳本能夠識别到這些語音輸入。

這裡介紹一個開源的JavaScript語言輸入庫,名叫annyang。
Github位址:
https://github.com/TalAter/annyang截至到2018年7月12日,這個github倉庫已經有4833個Star了。
annyang實際上就是一個隻有2KB大小的JavaScript腳本檔案,使用起來非常友善。
下面就跟着我一起做一個Hello World應用吧,看看您通過麥克風說話的聲音是如何被這個JavaScript庫檔案識别到的。
建立一個html檔案,将下面的代碼複制進去。将它部署到您本地的Tomcat或者nodejs伺服器上。
我測試用的是Chrome。
當您第一次在浏覽器裡通路這個網頁時,會彈出下面的Chrome對話框,提示您這個應用要使用您電腦上的麥克風。點Allow按鈕即可。
這個應用有兩個地方向您提示它可以接受語音輸入。第一處是下圖1的紅色小圓圈。
第二處是一個小的麥克風圖示,點選之後,可以設定允許或者禁止麥克風。我們當然是要選擇允許啦,否則如何接受語音輸入呢?
如果您的筆記本電腦本身也有麥克風,可以從這個下拉菜單裡選擇用筆記本自帶的麥克風,還是用外接的麥克風。我用的是後者。
現在可以測試了。
因為代碼裡我給Hello這個語音綁定的執行函數是一個alert彈出對話框,是以當我對着麥克風說了一句“Hello"之後,我的浏覽器立即彈出了這個對話框。
同樣,說了"Bye"後,會彈出“再見”。我在響應“Bye”這個語音的函數設定了一個斷點,大家通過調用棧也可以觀察到annyang的處理邏輯。
從annyang的github上能看出,中文也在支援的語音之列,是以大家放心大膽地使用吧!
https://github.com/TalAter/annyang/blob/master/docs/FAQ.md連粵語都支援,厲害了!
更多細節,請查閱annyang的官網。
https://www.talater.com/annyang/