JavaScript的語音識別

時間 2019-12-06

原文原文鏈接

有沒有想過給您的網站增添語音識別的功能？好比您的用戶不用點鼠標，僅僅經過電腦或者手機的麥克風發佈命令，好比"下拉到頁面底部」，或者「跳轉到下一頁」，您的網站就會執行對應命令。聽起來很酷對麼？然而爲了實現這個功能，必須得讓您網站的JavaScript腳本可以識別到這些語音輸入。javascript

這裏介紹一個開源的JavaScript語言輸入庫，名叫annyang。html

Github地址：https://github.com/TalAter/an...java

截至到2018年7月12日，這個github倉庫已經有4833個Star了。node

annyang實際上就是一個只有2KB大小的JavaScript腳本文件，使用起來很是方便。git

下面就跟着我一塊兒作一個Hello World應用吧，看看您經過麥克風說話的聲音是如何被這個JavaScript庫文件識別到的。github

新建一個html文件，將下面的代碼複製進去。將它部署到您本地的Tomcat或者nodejs服務器上。瀏覽器

<html>

<script src="annyang.min.js"></script>

<script>

if (annyang) {

var commands = {

"Hello": function() {

alert(" I have heard your voice!");

}

};

var commands2 = {

"Bye": function(){

alert("再見！");

}

}

annyang.addCommands(commands);

annyang.addCommands(commands2);

annyang.start();

}

</script>

</html>

我測試用的是Chrome。服務器

當您第一次在瀏覽器裏訪問這個網頁時，會彈出下面的Chrome對話框，提示您這個應用要使用您電腦上的麥克風。點Allow按鈕便可。函數

這個應用有兩個地方向您提示它能夠接受語音輸入。第一處是下圖1的紅色小圓圈。測試

第二處是一個小的麥克風圖標，點擊以後，能夠設置容許或者禁止麥克風。咱們固然是要選擇容許啦，不然如何接受語音輸入呢？

若是您的筆記本電腦自己也有麥克風，能夠從這個下拉菜單裏選擇用筆記本自帶的麥克風，仍是用外接的麥克風。我用的是後者。

如今能夠測試了。

由於代碼裏我給Hello這個語音綁定的執行函數是一個alert彈出對話框，因此當我對着麥克風說了一句「Hello"以後，個人瀏覽器當即彈出了這個對話框。

一樣，說了"Bye"後，會彈出「再見」。我在響應「Bye」這個語音的函數設置了一個斷點，你們經過調用棧也能夠觀察到annyang的處理邏輯。

從annyang的github上能看出，中文也在支持的語音之列，因此你們放心大膽地使用吧！

https://github.com/TalAter/an...

連粵語都支持，厲害了！

更多細節，請查閱annyang的官網。