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/


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)

jQuery Mobile

April 06, 2012

どうやらGALAXY系のスマホに対応していないようなのでメモ。
普通のjQueryは問題ないようです。

jQuery Mobile
http://jquerymobile.com/


Permalink | Comments (0)

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");
}


Permalink | Comments (0)