下記はWeb Speech APIを使うための簡単なサンプルです。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h3>Web Speech API Test</h3> You spoken: <div id="div_result"></div> Status(To stop, say 'goodbye'): <div id="div_status"></div> </body> <script src="app.js"></script> </html>
app.js
var div_result = document.getElementById('div_result');
var div_status = document.getElementById('div_status');
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
console.log("onresult");
var result = event.results[event.results.length - 1];
if(result.isFinal){
var last_spoken = result[0].transcript.trim();
console.log("last_spoken=" + last_spoken);
div_result.innerText = last_spoken;
// When spoken the stop command, stop the WebSpeechRecognition.
if(last_spoken.toLowerCase() == 'goodbye'){
recognition.stop();
}
}
};
recognition.onstart = function() {
console.log("onstart");
div_status.innerText = 'Listening...';
};
recognition.onerror = function(event) {
console.log("event.error=" + event.error);
div_status.innerText = event.error;
};
recognition.onend = function() {
console.log("onend");
div_status.innerText = 'Stopped to listen!';
};
recognition.lang = 'en-US';
recognition.start();index.htmlを読み込むとブラウザがマイクへのアクセス許可を求めてくると思いますが、ここで「許可」すればマイクからの音声を拾い始めます。
そして、あなたが何かをしゃべると、その声がdiv_resultに表示されます。上の例では、recognition.lang = 'en-US' と設定しているので、声を英語(米国)として認識します。
最後に聞き取りを中止したいときは、「goodbye」と言えば中止するように仕込みました。
実行ログ
onstart app.js:23 onresult app.js:9 last_spoken=hello app.js:13 onresult app.js:9 last_spoken=this is web Speech API test app.js:13 onresult app.js:9 last_spoken=goodbye app.js:13 onend app.js:33
さて、この方法は今のところ Chrome Packaged App や Chrome Extension では使えないようです。使おうとすると"not-allowed"エラーが発生すると思います。このAPIは今のところChrome Hosted Appでのみ使えます。
Packaged Appでも使うには
Packaged AppやChrome Extensionなどでも使いたいときは以下のようにします。これは、JavaScriptを使わずにHTMLタグだけで実現する方法ですが、これならPackaged Appなどでも使えます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h3>Web Speech API Test</h3> <input type="text" id="txt" lang="en" x-webkit-speech=""> </body> </html>
これでinputボックスにマイクのアイコンが追加されます。マイクアイコンをクリックすれば聞き取りが開始され、もう一度押すと停止します。JavaScriptを使った例のようには細かい制御はできませんが、Packaged Appなどでも使える上に、HTMLタグだけで簡単に実現できる点はメリットです。
0 件のコメント:
コメントを投稿