home > html5

Chromeの音声入力 x-webkit-speech

April 11, 2012

Chromeの音声入力を実際にちょっと触ってみたのでメモ。

html
x-webkit-speech属性を使う。



<body>
<input type="text" id="utterance" x-webkit-speech />
<textarea id="results" style="width:400px;height:200px;"></textarea>


Javascript
onwebkitspeechchangeイベントでハンドリングして、
this.valueで文字情報を取得する。


$(document).ready(function(){
 /*音声認識処理*/
 var voicesharp = document.getElementById("utterance");
 voicesharp.addEventListener('webkitspeechchange',input_change,false);
});
/*音声認識処理*/
function input_change(e)
{
 var inputText = this.value;
 console.log('event:' + inputText);
 //alert(inputText);
 
 if (inputText.match(/テスト/)) {
  task01(inputText);
 } else {
  task02(inputText);
 }
}
function task01(_oktxt) {
 //alert("task01");
 console.log("action start");
 $("#results").val(_oktxt);
};
function task02(_errtxt) {
 //alert("task02");
 console.log("no action");
 $("#results").val(_errtxt);
};

詳細はこちらから
http://earlgreyx.wordpress.com/2011/05/03/html-speech-input-on-google-chrome/


Permalink | Comments (0)

Chromeの音声入力

HTML5のx-webkit-speechを使ったChromeの音声入力で
面白いサンプルを見つけたのでメモ。

<input type="text" x-webkit-speech />

http://slides.html5rocks.com/#speech-input

滅びの呪文(Chrome&マイク付きPCでやってね) - jsdo.it - share JavaScript, HTML5 and CSS


上級編もあるようです。

ラピュタ上級編(chrome&マイク付きPCでやってね!) - jsdo.it - share JavaScript, HTML5 and CSS



Permalink | Comments (0)