瀏覽器的語音識別功能

你能用這兒的代碼片段輕松地為個人網站添加語音識別功能，而且僅用原生的javascript就可實現。

上周四我有幸在西雅圖的Code Fellows大會上就瀏覽器中的語音識別發了言。

當時許多人驚訝於用原生javascript為個人網站添加語音識別功能竟如此簡單。因此我覺得可以在這里分享一些代碼片段，目前這些代碼只在Chrome下工作。

 

識別語音

你可以將語音轉化為文字：

var sr = new webkitSpeechRecognition();

sr.onresult = function (evt) {

    console.log(evt.results[0][0].transcript);

}

sr.start();

 

你也同樣可以得到結果的置信水平（置信水平指特定個體對特定命題真實性相信的程度--來自百度）：

var sr = new webkitSpeechRecognition();

sr.onresult = function (evt) {

    console.log(evt.results[0][0].transcript, evt.results[0][0].confidence);

}

sr.start();

 

你可以得到中間結果：

sr.interimResults = true;// false by default

sr.onresult = function(evt) {

for (var i = 0; i < evt.results.length; ++i) {

console.log(evt.results[i][0].transcript);

};

};

 

或是已識別語音的幾種不同選擇結果：

sr.maxAlternatives = 10;// default = 1

sr.onresult = function(evt) {

for (var i = 0; i < evt.results[0].length; ++i) {

console.log(evt.results[0][i].transcript);

}

}

 

你可以設定一種語言，以便改進：

sr.lang = 'pl-PL'

 

以上所有將在你講話停止時停止識別。為避免識別中途停止，你需要設置continuous標志位為true。

另外，這樣會導致每段語音都被當作中間結果，因此你同樣需要更新onresult回調函數：

sr.continuous = true;// false by default

sr.onresult = function(evt) {

console.log(evt.results[evt.results.length-1][0].transcript);

};

 

JS中的語音識別對象除了onresult,還有以下可用的回調函數：

sr.onstart = function() { console.log("onstart"); }

sr.onend = function() { console.log("onend"); }

sr.onspeechstart = function() { console.info("speech start"); }

sr.onspeechend = function() { console.info("speech end"); }

 

輸出語音

 

var msg = new SpeechSynthesisUtterance('Hi, I\'m Jakub!');

speechSynthesis.speak(msg);

 

你也可以改變輸出的發音：

var voices = window.speechSynthesis.getVoices();

msg.voice = voices[10]; // Note: some voices don't support altering params

 

下面是其他可以設置的選項：

msg.volume = 1; // 0 to 1

msg.pitch = 2; //0 to 2

msg.text = 'Hello World';

msg.lang = 'en-US';


msg.onend = function(e) {

console.log('Finished in ' + event.elapsedTime + ' seconds.');

};

 

總結

 

語音識別在瀏覽器中的應用已不可能逆轉，問題是大多數網站會在何時增加對語音的支持。

下面的三個有關語音識別接口的鏈接或許對你有幫助：

My GitHub: https://github.com/jj09/voiceCmdr

My Website: http://jj09.net/website-with-speech-recognition-for-free/

My Demo: http://bookslib.azurewebsites.net/#/

注：本文為譯文。

原文鏈接： https://dzones.com/articles/speech-recognition-in-the-brower-1