home > April 2012
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
jQuery Mobile
April 06, 2012
どうやらGALAXY系のスマホに対応していないようなのでメモ。
普通のjQueryは問題ないようです。
jQuery Mobile
http://jquerymobile.com/
Tweet
JSONとは
JSONとはJavaScript Object Notationの略で、テキストベースのデータフォーマットです。
JavaScriptとの親和性の高さから現在ではAjaxでのデータ交換フォーマットとして広く利用されています。
XMLでの表記
＜?xml version="1.0" encoding="utf-8"?＞
＜data＞
＜selection＞
＜ukey＞××××＜/ukey＞
＜name＞NAME＜/name＞
＜/selection＞
＜/data＞
JSONでの表記
{
"selection" :
[
{
"ukey" : "××××",
"name" : "NAME",
}
]
}
jQuery.ajax()で読み込む方法
/*JSON読み込み*/
jQuery.ajax({
url : 'data.json',
dataType : 'json',
success: handleSuccess,
error: handleError,
complete: handleComplete
});
〜
/*JSON読み込んだ後の処理*/
/*Ajax通信成功時の処理*/
function handleSuccess(data, dataType)
{
//alert("Success");
var texts = data.text;
$("#jsonarea").html(texts[0]);//内容表示
}
/*Ajax通信失敗時の処理*/
function handleError(XMLHttpRequest, textStatus, errorThrown) {
//alert("Error");
}
/*Ajax通信終了時の処理 → エラーがあってもコンプリートされる*/
function handleComplete(XMLHttpRequest, textStatus) {
//alert("Complete");
}
Tweet
