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/
Tweet
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
Tweet
