Web MIDI APIで「Webならでは」をやってみるのが夢で、その夢をやっと実現させました！！こんな感じです。

Computerを2台用意して、片側のComputerに接続されたMIDIコントローラを演奏すると、別のComputerに接続されているシンセが鳴り出すという仕組みです。ブラウザとMIDIコントローラ/シンセはWeb MIDI APIを使ってMIDIメッセージをやりとりをし、Computer間でのMIDIメッセージの通信にはWeb RTCのDataChannelを使用します。また、せっかくのWebRTCですのでお互いの映像・音声の送受信も行っています。
動画を御覧ください▼

WebRTCの実装 peer.js を使っています。驚くほど簡単にできてしまいました^^ 動画では一方通行ですが、双方向でもできるはずです。また遅延に関して、今回の2台のComputerは同一セグメントにぶら下がっていたこともあってか、体感できる遅延はありませんでした。（詳細な調査もしていませんが。。。） 「MIDIを使うのであれば、これでセッションできちゃうんじゃないのかな〜？」と感じた一瞬でした。ホント、ここまで簡単に実装できてしまう（動画編集のが時間かかってるw）とは夢にも思っていませんでしたので、自分自信が一番驚いています。

今後は peer.js の部分をNTT Commさんから先日リリースされた SkyWay にしてみようかと思います！！

TPAC(Technical Plenary / Advisory Committee Meetings)のネタを書こうと思っいたのですが、ちょっと遅くなっててすみません。そんな中 HTML5 Conference 2013 で Web MIDI APIについてお話をさせていただいてきました！映像はこちらです。（3:22:58くらいからです。）

この中でお答えを出来なかったご質問が1つありましたので調査しました。ご質問内容は 「Web MIDI APIはOfflineで使用可能か？」 というものです。その結論は 「Web MIDI APIはOfflineで使用可能です。」 Offline動作の検証にはWebブラウザにパッケージをインストールする形のPackaged App(パッケージ型アプリ)であるChrome Appsを使用しました。ソースはこちらです。 GitHub
まずはgit cloneをしていただき、インストール方法はこちら▼をご参考にしてください。(アイコン等、少々違いますがインストール方法は同じです)

インストールしていただき、動作させてみるとOfflineでも利用可能ことが分かるかと思います。もちろんコンピュータをネットワークから切断しても利用可能ですし、Chrome Appsの形にしなくても file:// でも利用可能です 。ちなみに、W3CのSPECにはOfflineに関しては特に記述されていませんでした。

現状、1点だけご注意ください。Web MIDI APIをPolyfillを使わずに利用できるChromeで、OfflineとしてWeb MIDI APIを使う場合 SysEx は今のところ利用できません。ですので、SysExは必ずfalseにするようにしてくださいね。▼

navigator.requestMIDIAccess({sysex:false}).then(successCallback, errorCallback);

[追記] 2013/12/03 SysExを使わない場合、file:// とURLを指定する形での利用も可能な旨を追記。

10月19日にWebで音楽系のアプリを作ろう！というその名も「Web Music ハッカソン #1」を行いました。(このPOSTはWeb Music Developers JPの管理人として書いています。)

すーーーーっごく楽しかったです^^ 不思議だったのは初心者チーム。参加者の方々は単にWeb Audio/MIDIの初心者なだけで、Webに関してはかなりのやり手というところ。間違いではないんだけどw それがあったからか初心者チームのレベルが高かった。更に他のチームの方々の発想もバリバリな音楽、ブラウジングを楽しむツール、80円の自作LeapMotionを使った楽器、メディアアートのようなアプリが生まれ、本当に予想もしていなかったWeb Musicの大きな世界が広がっていて、多種多様だったという点がとても面白かったです。そして、興味深かったし、本当に勉強になりました。
そして、チューターの方々（Web Audio/MIDI: @aike1000、@g200kg、WebAPI: @komasshu）も素晴らしくしっかり皆さんに教えてくださっていて、それでいてさりげなくアプリをかいてしまう、、、、マジで感動しました！！ありがとうございました。 そして、ハック後の懇親会、Twitterで「次回までにはもっと勉強してきます！」というような抱負、また「次回はいつですか？」というような質問をいただけたことを、本当に嬉しく思うのと同時に、まだ何も決まっていないのに僕自身次回のハッカソンに向けてワクワクし始めています。（自分自身ネタを探さねば><）

当日のイベントの熱さはこちらで！！▼

ということで、Web Music ハッカソン #2 やります。乞うご期待！！！（忘年会が先になるかもf(^-^;)）

ここで参加された皆様へのお願いです。 参加者の皆様からのお声を Web Music ハッカソン #2 の参考にさせていただきたいと考えていますので、ぜひアンケートにお答えください！！ http://goo.gl/DG1OqF

最後に、会場を貸していただきましたGoogle Japan様、並びにGoogleの及川様、北村様、豊島様、また楽器の提供の呼びかけをしてくださったAMEI様、また賛同していただき楽器の提供くださましたクリムゾンテクノロジー様、KORG様、YAMAHA様、更に当日お手伝いをしてくださいましたスタッフの皆様、準備にご協力いただきました皆様、陰ながらお支えくださった皆様、本当にお世話になりました。心からお礼をさせていただきたく思います。ありがとうございました。

余談ですが、Web Music ハッカソン#2 とか 忘年会の情報はGoogle Groups（Web Music Developers JP）、Google+ Community Web Music Developers JPでも行いますので、気になってる方はぜひご参加くださいね！！！

さてここからは、当日の写真と動画のピックアップです。その他の写真、動画はこちらにあります。参加者の方で、手元にあるけどアップしていないという方はぜひ上げてください^^ 当日はリアルに寒かったのでダウンのチョッキを着て登場。

アメリカからhangoutにてWeb MIDI API EditorのChris Wilson(Google)登場！！！ その後チーム分け。

• シンセサイザー
• タンジブル
• デバイス連携
• 初心者

の5チームに分かれてハック開始。 開始しましたが、初心者チームにはチューターからの説明があり、その後本格的なハックタイムに突入しました。

最後に発表会を行いました。
動画はこちらです ▼

ここではスペシャルゲストとして @mohayonao さんがhangoutで参加！！
優勝作品は、デバイス連携チームのテノリオンを使ったVJになりました。(動画は1:04:42辺りからです)

そして最後に懇親会での集合写真＠中国茶房8。（藤本健さんのFacebookより）

プレゼンテーション中はスライドを表示してると思います。けど、そんな時に「実は、手元の実物を見せたい、、、」って思ったことはありまえんか？？
僕は直前になるといろいろアイデアが浮かびプレゼン前に例えばデモを作ってることもありますf(^-^;) それと同じように、直前に「あっ、これ見せたほうが臨場感が伝わるよな。。。でも資料作成完了してて画像・動画は入れられないし、そもそも時間がない。。。(´・ω・｀)」という場合、「カメラを用意して、ケーブルを用意して、プレゼン中に切り替える？えっ、それ失敗したら悲惨だな〜」とか物理的にも、気分的にも大変ですよね。
そんな場合、ネットにつながっているorお使いのコンピュータにWebサーバが動いている場合に使えるのが今回ご紹介するWeb Cameraとブラウザを使う方法です。

早速、それがこちら

使い方は超簡単の2Step。

1. Web CameraをPCに接続（PC内蔵のCameraも使えます）
2. ココにアクセス、表示されたウィンドウ内のどこかをクリック

以上です^^
あとは見せたい実物をCameraで映すだけ！！
PCに複数Cameraが接続されている場合はアドレスバーの右に出てくるカメラのマークをクリックすると選択できます。(Chrome)

これWebRTCで定義されているgetUserMedia()というAPIを使っています。気になる方はソース見てみてくださいね〜

（Web CameraはiBuffaloのBSW32KM03BKを使ってます。）

9月5日のGDL(Google Developers Live)はご覧になられましたか？ 「WebAudioAPIを使った音の扱い方」というタイトルでg200kgさんが出演されました。 基本的な使い方から、WebAudioAPIが実装されていないブラウザから使う為の Polyfill：WAAPIShim についての説明と、とても詳しくご説明くださりかなり勉強になりました！

そして次回、えーじさんからの告知がありました通りWeb MIDI APIについてになります。内容は以下を予定しています。

• MIDIの歴史やユースケース、仕様の説明
• Web MIDI APIの使い方
• Web MIDI API Wrapperの説明

さらに、何よりもChromeで実装を担当されています豊島さんもご一緒してくださり、とても豪華な感じになると思いますので、ご興味のある方はぜひ御覧くださいね^^

また「Hackathonもします」と告知もありましたが、日程は10月19日、場所はGoogle Japanオフィスでやりますよ！！ お題は「Web Audio API、Web MIDI API を使ったアプリケーションを作る」です。募集開始はもう少し先になってしまいますが、お楽しみにしててください^^ 参加を迷ってしまいそうな方は、募集開始までにHackする具体的なアイデアとか、Hackする方向性とかをモヤっと考えてるとアイデアが降りてくるかもしれないですよ！

一例ですが、こんなのも作れちゃうんです！

アプリケーションの事例

• PowerChord Guitars
  
• Air Teburin
  
• HE MIDI