icon 2011/11/18 Web Audio API
GDD 2011 では Web Audio API の反響が良かったですね。

ドラムサンプル


基調講演ででもしてたサンプル
WebAudio Drum
HTML5 で作るっていう点ではかなり注目でした。
テンポも変えられるし、何よりデザインがかっこいい!

リアルタイムセッション


Plink by Dinahmoe (Web Audio API)
YAMAHA でもネットワークセッションのネタが話題になりましたが、これも結構凄いと思いました。
DAW やってる人ならわかるかと思いますが、レイテンシーって凄くシビアなんですよね。
それをネットワークでやるってのは想像以上に大変そう。
プロユースには難しいかと思いますが、ユーザのコミュニティには十分かと思いました。

ピアノサンプル


Sound Toy
楽器アプリも簡単に!?
というか、各楽器の音を波形を自ら作ってるんですかこれ?

Chordlead でサンプリング方式で再生機能をつけてますが、FM音源方式はちょっと大変そう。。。

ちょっとだけ、ソースを見てみたけど、オーディオバッファや音程等は webkitAudioContext で全て管理してるようです。
SoundToy.prototype.noteOn = function( note )
{
    var id = this.mId;

    note += this.mOctave*12;

    this.mId = (this.mId+1) % 8;

    // copy data
    var dbuf = this.mBuffer[id].getChannelData(0);
    var num = this.mSLen;
    var sbuf = this.mSamples[note];
    for( i=0; i<num; i++ )
    {
        dbuf[i] = sbuf[i];
    }

    var node = this.mAudioContext.createBufferSource();
    node.buffer = this.mBuffer[id];
    node.gain.value = 0.5 * this.mVolume/100.0;
    node.connect(this.mAudioContext.destination);
    node.noteOn(0);

    this.mActiveNote[id].mNote = note;
    this.mActiveNote[id].mTo = new Date().getTime();
}
MIDI シーケンサーは自作っぽいです。
ライブラリとかあるんですかね?

音声認識サンプル


inputタグに「x-webkit-speech」をつけると音声を認識します。
webkitspeechchangeイベントリスナーで、音声認識の結果を出力しています。

マイクボタンを押して話しかけて下さい。






ソース


<input id="speech-input-textbox" type="text" x-webkit-speech style="width:400px;height:50px;font-size:135%;margin-left:auto;margin-right:auto;display:block;">

          document.getElementById("speech-input-textbox").addEventListener("webkitspeechchange", function(event) {
            var speechresults = document.getElementById('speech-results');
            speechresults.innerHTML = '';
            for (var res in event.results) {
              speechresults.innerHTML += 'Utterance: ' + event.results[res]['utterance'] + '<br />Confidence: ' 
                + event.results[res]['confidence'] + '<br /><br />';
            }
          }, false);


HTML5 オフライン機能


資料

このサイトについて

HTML5 & CSS3化しつつあるので、現在IEには対応してません。
できれば、Google Chromeやら Apple SafariのWebKit系をお勧めします。

DBからプログラムまで一応全て自作なので、バグってたらすいません。
実験でFlash版(Flex版)を先に作りましたが、ちょっと停止してます。

プロフィール

新宿近辺でSE & プログラマーしてます。
Webアプリの開発・設計とか、最近はiPhoneとか奮闘してます。
デザインはさっぱりです。

音楽は、昔からCubase打ち込み人間で、そっちの方が経歴は長いですが、最近はやる暇がないです。。。

今は、Gon's Privates ってバンドのキーボードやってます。
単発的に、なんちゃってジャズ系のライブもやってます。

名古屋生まれなのでドラゴンズ好きです。

Info && SNS

Gmail

 yohei.yoshikawa@gmail.com

Twitter

 http://twitter.com/yoo_yoo_yoo

あんまつぶやきませんが、一応技術系メインで使ってます。情報交換はこちらへ

FaceBook

 http://www.facebook.com/#!/profile.php?id=1439130626

海外の知り合いがいないので閑散としてます。

mixi

 http://mixi.jp/show_profile.pl?id=230072

音楽仲間とかはこっちメインでやってます。興味があればこちらへ