某プロバイダーに勤めています。

HTML5歴：1年程、10数年ぶりのJavaScript

twitter: @html5radio

スタッフの方々第0回HTML5プログラミング・クリエイティブコンテスト」の運営・審査していただき、誠にありがとございました。

Google I/O 2011 のHTML5セッションよかったですね。

HTML5 Showcase for Web Developers: The Wow and the How」

• http://www.htmlfivewow.com/

内容

• HTML5 Radio
• FireFox4 向け(Audio Data API版) http://html5.ohtsu.org/html5radio/html5radio_firefox.html
• Chrome 向け(Web Audio API版) http://html5.ohtsu.org/html5radio/html5radio_chrome.html
• FireFox4リリース記念(MathML版) http://html5.ohtsu.org/html5radio/ff4_mathml/
• Kinect Hack for HTML5

• 複数の音楽データ(CC License)を Audio APIで再生
• Audio Data API(FireFox4), Web Audio API(Chrome)を用いたオーディオ処理
• データの解析によるリアルタイムスペクトル表示
• ビート検知によるアニメーションの発生タイミング同期
• 疑似ホワイトノイズの生成
• MathML による数式のインライン表示
• CSS3 transition/transform による疑似アニメーション
• Web Workerを使った非同期クロスサイトJSONPによるtwitter連携

Audio処理関連のAPIは、現在２つの実装(Audio Data API/Web Audio API)がある。

現在 W3C Audio WGで標準化が進められている。

• FireFox4 向け
• audio要素に独自イベント(mozAudioAvailable)を加え、raw data を取得
• 独自mozWriteAudioメソッドで音声データを書き込み

       var audio = document.getElementById("audio");
       audio.addEventListener('MozAudioAvailable', function(event){
         var raw = event.frameBuffer;
         ....
       }, false);
	    

• Chrome Mac 向け(最近 dev channelで Win/Linux対応されたが…）
• Audio 要素からではなくAjaxデータを読み込む。そのため比較的サイズが小さいものが対象
• 生データを処理するのではなく効果音のノードをつなぎ最終的にミキシング出力

              context = new webkitAudioContext();
	      source  = context.createBufferSource()
              noise = context.createJavaScriptNode(8192,1,1);
	      source.connect(noise);
	      ...
              analyser.connect(context.destination);	      
	    

FireFox4では CSS Animationをサポートしていないけど(FireFox5から)、transitionendイベントを利用することで疑似アニメーションが実現できる。

      var el = updateTransition();
      el.addEventListener("transitionend", updateTransition, true);
    }
    function updateTransition() {
      ...
    }
	  

WebWorkerのimportScripts は確実な非同期クロスサイトJSONPとして利用できる。(JSONPの同期・非同期はブラウザーによって挙動が違うらしい)

onmessage = function(event) {
  hashtag = "music";
  var search = "http://search.twitter.com/search.json?callback=getTwit&rpp=100&q=%23"+hashtag;
  importScripts(search);
};
function getTwit(objJSON){
...
}
	    

すみませんデモは終わりました。

オリジナルはこちら

• FireFox4向け(Audio Data API版) http://html5.ohtsu.org/html5radio/
• Chrome 向け(Web Audio API版) http://html5.ohtsu.org/html5radio/chrome_mac/
• FireFox4リリース記念(MathML版) http://html5.ohtsu.org/html5radio/ff4_mathml/

Kinect情報(輪郭,ハンド,骨格)→OpenNI→OpenCV→NPAIPプラグイン→FireFox→Node.js→共有(FireFox/Chrome)

本当は Native Client + Pepper API なんかでやりたかったのだが…

御清聴ありがとうございました。

このプレゼンは、

「0へぇ～」

でした。