Web MIDI API – HTML5Experts.jp

及川卓也さん、河合良哉さんに聞いた「地方で日本で働く・海外で働くの話」（その２）──HTML5 Conference 2016セッションレポート

加藤拓明 — Wed, 02 Nov 2016 01:00:14 +0000

連載： HTML5 Conference 2016 特集 (8)

HTML5 Conference 2016の展示ブースでお届けしたカンファレンスラジオコーナー。Increments及川卓也さんとヤマハ河合良哉さんがゲストに来てくれた「地方で日本で働く・海外で働くの話」を完全版テキストの後編をレポートします！

日本と海外の違いの話

前編に引き続き、ゲストはIncrements及川卓也さんとヤマハ河合良哉さんです。

「実際に今年海外に行かれて困ったことや、こういうところが違うの？とか、びっくりしたエピソードがあればお聞きしたいのですけれど、何かギャップとかありますか？日本のカルチャーと（比べて）」

「ギャップですか？」

「はい。例えば、僕が一番気になるのは食べものとかです。海外の姿は想像ではあるんですが、日本だとそこらへんに自動販売機やらコンビニやらがあって、買いたいジャンルのものがすぐに手が届くところにいっぱいある。たぶん海外というか、今お勤めされているサンフランシスコは土地も広いこともあるし、そういうのはないんじゃないかなって思って。

「そうなんです。そこおっしゃる通りで、日本に帰ってきていつも便利だなって思うのがコンビニエンスストアの存在なんですね。アメリカにもコンビニエンスストアはあるんですけど、そこに陳列されているものが全然違ってるんです」

「日本だとちょっと小腹がすいたなって思うとおにぎりだったり、サンドイッチや菓子パンは大体100円とか200円くらいで手に入るというのが大体じゃないですか。向こうに行くとおにぎりとか、サンドイッチとか…おにぎりはないにしてもサンドイッチとかは結構な値段しちゃったり。買って食べると、えっこれすごいまずいみたいなのがあったりして。気軽に買えないんですよね、怖くて。逆にがっかりしちゃうことがあるので（笑）」

「こっちで買うような気持ちで、サンドイッチ買うっていうことはできないんですね」

「やめたほうがいいかなと（笑）。そこは日本に帰ってきてすごい便利だなと思いつつ、便利すぎて日本に帰ってくるといっぱい食べちゃうんで、夜寝るときなんか胃がもたれてるなとか」

「なんかアメリカのそういったコンビニにとかで売ってるやつって、見た目からしてまずそうですよね」

「そうですね」

「見た目あまりこだわらないじゃないですか」

「こだわらないですね」

「こだわるときはなんかカラフルな感じになっていて、これはこれで食べたらまずそうな感じだなって（笑）」

「本当M&M’sの配色の感じですよね。もうすごい赤とか、すごい黄色とか」

「なんか脳の奥の方でこれ食ったらダメだよって、自分に語りかけてるようなものしかないんですよね（笑）」

「そうですね（笑）」

「色に対する感覚が違うんですかね？」

「原色が好きなんじゃないですか？知らない（笑）」

「原色系本当多いですよね。例えば食べ物の話じゃないですけど、MicrosoftのWordとか開いて、1番最初に図形とかパッと入れるとすごく緑の色が出てきたりするわけですよ。これすごい昔から不自然だなって思ってたんですけど、アメリカのそういう食材とか見ると、なるほどなって逆に納得しちゃって（笑）」

「そういうことですか」

「おそらく。だから色に対する感覚が、日本人と違うところは間違いなくありますよね」

「やっぱり、普段慣れ親しんでいる色がそういう配色のものが多いという環境による要因なのか、人種による気質がそうなっているのかというと、どっちなんでしょうね？それはわからないですね」

「どうなんでしょうね」

「とりとめのない質問をしてしまって、今は反省しています」

年齢が違う人とのコミュニケーション

「この後、僕らはどこにいく感じになるんですか？」

「えっとですね…」

「別に早く終われって言っているわけじゃないですよ。まだ全然話してもいいんだけど、この議論はどこに流れ着くのかなと思って（笑）」

「本来僕がここでやらなきゃいけないのは、ゲストのお二方の面白い話を伝えないといけない」

「今ね、加藤くんが面白い人になっているから（笑）」

「ごめんなさい。では、みんなが聞きたいんじゃないかなって思ったことを及川さんに質問していいですか？」

「いいですよ」

「去年転職されて大きく環境が変わったと思うんですけど、お若い方が多い会社に入られたじゃないですか。年齢が違うと、共通の話題だったり当時流行っていたものも違うと思うんですけど、年齢が違うことでコミュニケーションが難しい部分があったりするんでしょうか？」

「たぶんね、みんなが気使ってくれるんですよ。だからあまりそういうので困ったことはないですね」

「なるほど（笑）」

「長老が入ってきたという感じで、一生懸命おじいちゃんから聞いた話とかを思い出して話してくれるから」

「皆さんとは飲みに行ったり、遊びに行ったりするんですか？」

「そうですね。でもね、真面目な話わからないというか、今同じ世代でも趣味が違ったら全然話通じなかったりしません？昔って、視聴率30%取ったようなドラマがあったらみんなそれ見てるとかってあるけど、今は高校の時見てたドラマで全員に絶対通じるものってなかったりすると思う。趣味が違った人とはあまり通じないっていうことは、普通だったりするんじゃないかなって思うんですよね」

「なるほど」

「あまり困らないし、わからなくても別に気にしないし、そこで教えてもらえればいいかな。それ何？って言って、あーそんなのあったんだ、その頃俺何やってたかなー？みたいな感じで。で、気にせず僕、昔の話ガンガンしますから（笑）」

「素直にやり取りできるのってすごく大事ですよね。そういった謙虚さってすごいです」

新しい技術に対する取り組み方の違い　

「僕は仕事が変わって、学生とやり取りすることが多くなったんですけど、彼らってどんどん新しいことをやろうとするのに物怖じしない子が多いなと思って。新しい言語が出たら、『よしやってみよう！』ってやるんですけど、僕だと『これいつまで使えるのかな？』とか、『実際これ覚えたとして何の役に立つんだろう？』とか考えてからやっちゃうんですよ」

「彼らは、『それ面白い使ってみよう、動いた！』って。で、どんどんやっていくっていうので、なんか自分歳をとったなって感じることがあって。一概にそういうわけじゃないですけど、年齢が離れれば離れるほど物事に対する取り組み方って変わってくるのかなって思って」

「でも、技術がずっと使われるかどうかなんて全然わかんなくって、僕だって大学時代に使ってたのってFortranですけど、今Fortranなんて全く忘れてる。10年くらい前Web系のやつやっていた時はPerlだったけど、Perlもほとんど覚えてないし、その時にFortranが自分の30年後、40年後も使ってるかなんて考えたこともないし」

「Perlの時だって別にそこまで考えたわけじゃなくて。そこはあまり気にしないし、逆に、大きく内容が違うならともかく、技術ってどこかで関連性があるから一つの技術を覚えた時に、ここの応用だとか、これはここでいう何だっただろうってことを考えるだけで飲み込みが早いってことは多いと思うんですよ。プログラム言語じゃない話をすると、僕OSを作ってたわけですよね、Microsoft時代に」

「はい」

「今Webブラウザって結局はOSなんですよ。中でやっているものっていうのは、普通にスケジュール管理みたいなものもあれば、スレッド管理みたいなものもある。メモリ管理みたいなものもあるし、ガベージコレクションどうしようとかっていうところとかって中で普通にガチガチ入ってたりするわけですね」

「そうすると、ブラウザがOS化してくっていう流れになった時に、OSを作っていた時のいろんな知識だとか経験って役に立つんですよね。たぶんそれプログラム言語でも一緒ですし、ネットワークプロトコルでも一緒だし、なんでも同じだと思うんですよ。例えば、ネットワークって昔TCP/IPが流行る前とかっていうのは、普通にシリアルコネクタRS232Cっていうのがあったんですよ」

「はい」

「その上で、パソコン通信のためのやり取りだとか、ファイル転送のプログラムがあるわけですよ。Kermitって言われているのがあって、僕はKermitをあるプラットフォームに移植したんだけれども、そこでやっているプロトコルのいろんな手順で、結局はその後TCP/IPで見た時に同じ様なことをやっているんですよ」

「結局はウインドウ制御みたいな話が出てきたりとかっていうのは、基本は一緒なんですね。ヘッダーがあってトレーラーがあってだとか、あとはチェックサムだかなんかをつけて、ちゃんとそこのところのデータの妥当性をチェックしてますみたいな当たり前のところっていうのは、どんなプロトコルになったってそんな変わらなかったりするんですよね」

「なので、一旦覚えたってやつが完全に無駄になることはないと思うんですよ。そのままその技術が使えるかっていうとそれはこの世の中だし、これだけ技術が早いんで、それは期待しないほうがいいとは思うけど、なんかで流用できるし、生きてくるんじゃないかなと思います」

「なんかこれエラー発生しましたけど大丈夫ですか？」

「これは…よくないエラーですね」

「じゃあ、僕らは会場にいる人に語りかけましょう。会場限定！」

「YouTubeの配信の方が今壊れてまして」

「配信の方は申し訳ないです」

「聞こえてないですけどね、配信の人には（笑）」

「そうですね（笑）」

「河合さんはなんかそういうのないんですか？僕はいいことばっか言っちゃったけど、こういうのを見て、その技術には取り組んだ方がいいかもしれないけど、それはちょっと流石に慎重になった方がいなって思うようなものとか」

「まだ僕はおそらく経験が浅すぎていっぱい取り込んでる方だと思っているので、そこまでのところはないですけど、おっしゃった通りです。1つ学んだことっていうのはそこで学んだものが終わったとしても死ぬわけではなくて、必ずどこかで生きてくるっていうことが所々感じるとこはもちろんある。だからやっぱり物怖じしてやらないというよりは、やってしまった方が面白いんじゃないのかなっていう気はします。私事をお話しするんですけど、このWebBluetoothを始めたのは1カ月か2カ月くらい前なんですよ」

「そうなんですか」

「面白そうだなっては思っていたんですけど、やれる機会があまりなくて、まあちょっとやってみようって始めてみて、もちろんまだGoogleのChromeしかおそらく対応していないので、このあと使える技術かどうかなんてわからないわけなんですよ。なんですけど、やっぱり面白いからやってみよう感じになっているので」　

「そうそう！だからその技術がなくなっちゃうっていうことを恐れている人は、会場にもいたんですけど、あんどうやすしさんっていう人がいるんですね。知っていますか？」

「はい！」

「彼ね、今日ね、引っ張り出したっていうウエーブ(Google Wave※)のTシャツ着てきてましたから。ウエーブ本出したらウエーブがシャットダウンすることになって、シャットダウンのアナウンスがあった数日後に出版になったっていうね（笑）。人生で一番不幸な人みたいな。なんか彼が取り組んだ技術はだいたいdeprecateされるっていうDEATH NOTEの生き証人みたいな人がいるんです。でも全然恐れていないで、いろんなことどんどんやってますよ」

「なるほど。これからはそういう姿勢をとっていった方がいいことが多いかもしれませんね。学生のやり方を見て僕がいいなと思ったのが、Webの質問サイトとかに質問をたくさん書いていたんですよ。それが1個2個じゃなくて10個20個とかすごく書いていて、調べて分からなかったらすぐに聞いてどんどんやっているんだって思って」

「まとめたものがあったらまさしくQiitaとかに書けばいいし、そうすると最新の技術が出てきた時に、早めにキャッチアップできてQiitaみたいな記事が書けると、みんなに注目されて界隈で目立てるというか、そういうプラス面があるじゃないですか。その姿勢ってすごくいいなって思いました。スモールスタートというか、物怖じするんじゃなくて、面白そう、ちょっとやったらできるんじゃないか、頑張ってやってみよう、わからなかったら周りに聞こう、まとめたらアウトプットしようみたいな、そういうエンジニアになっていくのがいいんじゃないかって」

「でも技術者って、基本面白いからその技術に取り組むんじゃないですか？例えばArduinoだとかRaspberry Piとかも、今でこそIoT的に使えるかもしれないけど、最初はただの電子工作じゃないですか」

「いわゆるおもちゃみたいな位置付けだったんですよね」

「すべての技術はおもちゃから始まるんですよ。僕それもうずっと言っていて、要はイノベーションのジレンマっていう話あるじゃないですか？あの破壊的イノベーションっていうのは、基本的にその時にその業界において、ほとんどおもちゃって思われているやつなんですよ。メインフレームがあった時に、僕がいたDECって会社が作っていたミニコンっていうのは、ほとんどおもちゃみたいなものなんですね。ミニコンとかがある程度出てきてダウンサイズが見えた時にもうワークステーション、さらにそれ飛び越えてパソコンなんておもちゃなんですよ」

「当時のNECの98シリーズを作った時に、おそらくNECの98をやれって言われていた技術者の人は、メインフレームをやっていた時に、そこに部隊異動になったら勘弁してくれって思うわけですよ。ほとんどおもちゃって言われていたのが、あっという間にメインストリームの技術を追い越していくっていうのが破壊的イノベーションなんですね。基本おもちゃっていうところで、これ面白いっていうのが実は人が集まってきて育っていくと、それがメインストリームになって、今までの事実を置き換えていくということが起きているんですよ」

「みんなが面白いって思っているやつとか、さっき言った生き残るかもっていうのは何かあると。生き残るかもしれないっていうのは、確率論でいうとあるかもしれないですよ」

「そこにいろいろ面白い展示がありますけど、WebのMIDI関係今一番面白いなって思っていることってどういうことですか？」

「面白いなって思っていることですか？」

「さっき及川さんが、空間の？概念がWebで表現できるって、そしたら音もその空間、例えばちょっと動いたらそっちから聞こえるっていうそういう表現ができたりっていう風になっていくんでしょうか？」

「この間Chromeの方に実装されたJUMP(※)っていう、Googleの出している専用のプラットホームでしか見られない映像でしたっけ？音響をWebブラウザ上で再現できるようになっていて、そのJUMPでフォーマットで録られた音声は3Dの音響でちゃんと聞けるっていう状態になっていたりします」

「もうそういうことができる時代になっていたんですね」

「そうですね。だいたい音って、結構最初は取りかからないんですよ。最初は映像が入って、目で見る方が完成し出すと、音ができるみたいな。WebオーディオとかMIDIもそうだったんですけど。Canvasが動くようになって、WebGLが動くようになって、じゃあは次は音だろってみたいな流れになるわけですよ。音ができると、その次は3Dだという話になるわけですよね。CanvasからWebGLになったみたいに。今その流れがきているかなって感はありますけどね」

「なるほど」

「最近WebVRとか言ってWebブラウザ上でVRができるようなフレームワークができていたりするんですけど、そこは面白いかなっていう気はします」

Google Wave：過去に米グーグルがサービス提供していたコミュニケーション及びコラボレーションツール。2010年5月にはサービスを一般公開したが利用者が増えず、同年8月4日に開発中止を表明。サービス自体は2012年4月末まで継続された。
JUMP：グーグルが提供するVRコンテンツ作成システム

まとめ

「この後13時からセッションされるんですよね？」

「そうですね。13:20ですね、そろそろ」

「そちらの方で今のような話とかも？」

「そうですね。まさに今頭の中でそこで話す内容ちょっと話しちゃったな、みたいな。どうしようみたいな感じだったんですけど（笑）」

「今ここで先にお話ししてしまったかもしれませんが、その話も聞けるということなので、ぜひご興味ある方は河合さんのセッションをご覧になってみてはと思います」

「よろしくお願いします」

「準備のお時間もありますよね、すみませんでした」

「いえいえ、13:20からなんで大丈夫です。おそらくまとめをするとなると、とりあえずやってみろっていうことですよね。口で言う前にとりあえず手を動かしてみろと。それが自分を作るっていう感じなんですかね？」

河合さんの講演動画はこちらからどうぞ！

「純粋に面白いんじゃないじゃないですか？学生さんもきっと面白いと思ってやっているんで。逆に言うと、なんで加藤さんやんないのかなっていう（笑）」

「なんかちょっとひねくれているんでしょうかね？」

（笑）

「ごめんごめん、いじめたかったわけじゃないから（笑）。元気出そうよ！なんかツラいことあった？」

「いえ、大丈夫です」

「今日夜行のバスで福島から来てるんですよ。おそらく疲れてらっしゃる」

「なるほど」

「すみません、多大なフォローをいただきありがとうございます！」

「いえ、とんでもない」

「すみません、スピーカーを入れていただいた方もどうもありがとうございました。この辺りで、第1回目は終了したいと思います」

「ありがとうございました！」

ラジオブースで放送した全ての内容を動画で公開！

放送1回目だけでなく、ラジオブースで放送した全ての内容を動画でも公開中です。「地方で日本で働く海外で働くの話」は、動画の[3:03:38]-[3:50:50]です。

「地方で日本で働く・海外で働くの話」 by DJ KATO [ゲスト：及川卓也さん、河合良哉さん]
「ハードウェア楽しいですよね」 by DJ KATO [ゲスト：中川友紀子さん、羽田野太巳さん]
「ハートブレイクカフェ」 by DJ KATO & 物江修さん

（撮影・写真提供：HTML5 Conference 2016撮影スタッフ）

及川卓也さん、河合良哉さんに聞いた「地方で日本で働く・海外で働くの話」（その１）──HTML5 Conference 2016☆番外編

加藤拓明 — Tue, 01 Nov 2016 00:40:00 +0000

連載： HTML5 Conference 2016 特集 (7)

HTML5 Conference 2016の展示ブースでは、私DJ KATOによる特別ラジオをお届けしておりました。
すごく面白いので、Increments及川卓也さんとヤマハ河合良哉さんがゲストに来てくれた「地方で日本で働く・海外で働くの話」を完全版テキストで書き起こしてみました。ぜひ、カンファレンスレポートの番外編としてお楽しみください！

まずは、自己紹介をお願いします

「海外にも地方にも行っていないのに、なぜか呼ばれています。Increments株式会社の及川卓也です」

「ヤマハ株式会社の河合良哉です。よろしくお願いします」

「地方にも海外にも行っていないというお話がありましたが、環境が大きく変わったという面で共通点があると考え、広い意味での定義としてとらえてほしいです」

「はい」

「まず、及川さんは…」

「ちょっと待って。お前は誰だという感じだから（笑）」

「あ！僕ですね！私、会津若松にあるIT系の会社に勤めております、加藤と申します。DJ KATOと名乗って、こういった司会をやらせていただいてます。どうぞよろしくお願いします」

「イエーイ！」

及川卓也さんの基調講演のお話

「先ほど基調講演を終えられたばかりですよね？（基調講演の後で）時間ありました？」

「1つセッションを聞いてきましたよ、React.jsの難しいやつを。途中で抜けてきちゃったんだけど」

「結構技術的な話を聞いてきたんですね。及川さんはどのようなお話をされたんですか？僕は聞きに行けなかったので…」

「聞いてなかったんだ！（笑）」

「準備をしていたので…」

「そうですか、ご苦労様です。僕は何の話をしたんだっけ？Webの話をしたんですよ。一応Webのカンファレンスなので。なんか飲んでもいないのに酔っ払ってるみたいですみません（笑）」

「Webは3つの側面がありますねという話で、アプリケーションの技術としてのWebとメディアとしてのWeb。あとはインフラ技術としてのWebで、それぞれいろんな局面を迎えている。でも今後も投資して、さらに発展させていかなきゃいけないですね、というすごくいい感じの話をした気がします」

「なるほど。そういった広い視点でのお話をされたという感じですね」

？？？？？？？？？？？？？

「ごめんなさい！緊張してしまって、わけのわからないことを言って申し訳ないです」

「基調講演を聞いていないのに申し訳ないのですが、プラットホームとしてのWebって、例えばどういう変化が起きてて、これからどうなるということなんでしょうか？」

「ずっと起きている話で、要は機能的にもどんどん追加されてきていると。で、ある程度WebのAPIってそこそこ揃ったようには見えるんだけれども、実はWebって古くからコンピューターディスプレイがあって、キーボードがあって、マウスがあるというところから、やっと今スマホみたいなところになってきている。そういった今までのデバイスやメディア系のものを超えたものに、これからはなっていくでしょうという話をしました」

「はい」

「ちょうど私の前にW3Cで慶応大の中村修先生が、HDRの話をされていました。要は輝度の部分をJavaScriptでWebからコントロールできたならば、映像が大きく変わるだろうって話を少しされてたんです」

「それにインスパイアされて、音の部分もaudioタグがあって、Web MIDIがあって、Web Audioもある。そんな状況ですが、実は2009年という早い段階からGoogleは考えていたんです。空間音響みたいなところで、要はVRのサウンド版。どこの位置にいたならばどういうふうに音が聞こえるはずだということを、拡張機能として公開しているのがもうあったりするんですね」

「はい」

「今までの普通にコンピューターディスプレイやスピーカー、ヘッドホンだけでは想像もつかなかったようなところまで、実はそのアプリケーションとしての可能性もまだまだ可能性がありますねって話」

「あとはWebAssemblyの話で、もはやそうなってくるとJavaScriptとHTMLとCSSとは全く違うアプリケーション開発技術も出てくるから、楽しいと同時にいろいろと考えなきゃいけないねっていう話をした感じです」

【基調講演】Webはオープンな分散型OS、アプリケーション・メディア・プラットフォームとしてのWeb技術─中村修教授、及川卓也氏が語ったHTML5の未来

「大丈夫ですか？これで今回のテーマにだんだん近づいてきます？」

「まだ1mmも近づいていないんですが、話の流れを大事に進めていこうと思います」

「了解です、任せます。ちょっと不安になりました（笑）」

河合さんに聞いたWeb MIDIのお話

「河合さんはWebとMIDIに関してお仕事上関わりがあると思うのですが、その方面で、今までできなかったことが今後できるようになるものにはどのようなものがありますか？」

「この隣にWeb Music Developers JP(※)というコミュニティーが主催している展示会場があって、そこで缶が鳴っていますけど、実はMIDIで動いていたりするんですよ。今まさに及川さんがおっしゃった、プラットホームとしてのWebのところでMIDIも入ってくるのかなと。外部のExtarnalのデバイスとブラウザが直接つながると、そこで起こったことは僕が言うのもすごく手前味噌なんですけど、楽器業界がWebの業界にどんどん入ってきたと言えるんじゃないかと思います」

「楽器が…Webに？」

「これも手前味噌なんですけど、ヤマハがrefaceというシンセサイザーを去年出したんですね。そのシンセサイザーは、普通のシンセサイザーだと大体ボイス、音色のパラメーターを保存するのに楽器に載っているメモリに保存するんです。だけど、そのrefaceというモデルに関しては保存する部分がなくて、どうするかというとWeb MIDIで接続をして、ブラウザから直接Cloudの方に保存する。そういうことで少し形が変わったかな。Webをストレージとして使うというような考え方に移ったと」

「なるほど」

「もう少し話すと、プラットホームとしてのWebという意味で、僕も昔から思っていて、やっぱりブラウザというとディスプレイがあってキーボードが目の前にあって、そこから外にあまり出ないよみたいなイメージがあると思うんですけど、それがまずMIDIで楽器の業界で外に出ましたと」

「はい」

「今ですね、GoogleのChromeにしか搭載されていないのかもしれないですけど、WebBluetoothっていうのがあって。このWebBluetoothというのを使うと、今度Bluetooth SMARTって呼ばれる世の中でいうBLEというやつですね。BLEの機器に直接接続ができるんですよ」

「はい」

「あそこにM&M’sが入ったおもちゃみたいなのがあるじゃないですか。あれ実はBluetoothで接続をして、ボタンを押すと中に入っているM&M’sがババババーッと出てくるおもちゃなんですけど、ああいうものが作れるようになるわけです」

「なるほど。これたぶんラジオで聞いている人にはちょっと…」

「見えないですね（笑）」

「見えづらいかなと思うんですけど、このすぐ隣にWeb Music Developers JPさんのブースがありまして、そこにWeb MIDIといろいろなものがあって、PCとMIDI楽器なんでしょうか？あれは？」

「そうですね。真ん中に並んでいるのはMIDIを使ったコントローラーで、その次に並んでいるのがライブビーツっていうブラウザを楽器にしてしまうような作品です。で、その隣にあるのがシーケンサー、これFirebaseを使って、いろいろな人と進行しながら音楽を作っていくハッカソンでハックしてもらった作品が展示されています。その隣には、これもWebの技術を使って照明をコントロールしようというもので、照明がコントロールされています」

「照明を、MIDIで？」

「はいそうですね」

「あ、そうなんですね」

「MIDIってミュージカルインストゥルメンタルデジタルインターフェイスという名前なんですけど、そのプロトコルを別の用途で使ってしまっているということですね」

「つまりMIDIって、タイミングだったり音色だったりという概念があって、それを表示のタイミングだったり、どの色にするかに置き換えて命令を出すという感じなんでしょうか」

「そうですね。おっしゃるとおりでございます」

「なるほど」

「その隣に並んでいるのがMIDIに関係ないですけど、WebBluetoothで接続されているお菓子が出てくるおもちゃです」

「さっき河合さんがブースを作っている準備段階をお見かけしたんですけど、M&M’sが勝手に動いてチョコレートをバラバラと吐き出しているのを見ましたけど、あれもMIDIでやっていた？」

「いや、あれはMIDIとは関係なくて、Bluetoothで接続をしてBluetoothで動かしています。もう一回出してみます。……あんな感じで」

※筆者注：↑Bluetoothで動かしているとさっき河合さんが言ってました。話を聞いていない。

「今出てる！」

「ここから接続しているんですけどね、全然見えないですよね（笑）」

「今まではMIDIというと、鍵盤があってそれをUSBでPCに繋ぐと、そのPCのソフトで楽器が鳴る。それは専用のソフトがあってそのソフトが鳴るイメージだったものが、今はWebブラウザがあればそのWebブラウザの表示の機能でMIDIのUSBに繋ぐだけで全部音が鳴ったりだとか、専用ソフトになるようなことが全部出来てしまうという状態になっているということですね」

「そうですね。それを楽器以外のもので使うことのも可能なので、そういったとこに応用していくっていうのもありかな」

「なるほど」

＜参考情報＞

河合さんがサンフランシスコに拠点を移されたお話

「ちなみに今年サンフランシスコの方に拠点を移されたということで、それはどういった目的で移動されたのですか？」

「夢にも思ってもなかったのですが、ありがたいことに駐在の司令を出してもらえ、今年1月下旬からアメリカに住んでます」

「日本でのWebのMIDIの普及と、海外でのWebのMIDIの普及には違いがあるんでしょうか？ご自身で決めていったというわけではないという話だったので、そういう依頼があったわけではないと思いますけど、海外に行ったことで日本のWebMIDIの盛り上がりと、海外の盛り上がりの違いがあったらお聞きしたいです」

「基本的に僕がまだ全然知らないだけかもしれないですけど、日本で今展示しているのがWeb Music Developers JPなんですけど、ここが異常に盛り上がっている感があるというのが僕の印象です（笑）」

「海外にWebでミュージックをする方たちがいるかなというと、あまりいないかなという気がしています。とはいえ、音楽で盛り上がっているというコミュニティはあるみたいで、その方々はいろいろなことをやっているみたいです。例えばWebGLを使って音楽と組み合わせて作品を作ったり、そういうのをアメリカでよく見かけることがありますね」

及川さんが海外で仕事をしていた話

「及川さんは海外で勤務された経験もおありなんですよね、いつ頃でしたでしょう？以前働いてらっしゃったのは日本DEC(※)にいらした後、Microsoftで働いていた時に海外にいらしたと…」

「そうです、よく知っていますね！」

「ネットで調べたら出てきました」

「その前に加藤さん声ちっちゃくない？」

「すみません、気持ちの萎縮が声に出ていたのでちょっと張ります」

「あと、マイクは柄の部分を掴んだ方がいい気がするよ（笑）」

「はい、こんな感じでよろしいでしょうか？（笑）」

「はい、ぜひ元気よくいきましょう！」

「私今から20年ちょっと前にまだMicrosoftが小さかった時ですね。Windowsのエンタープライズ版のWindowsNTっていう今のWindowsなんですけど、それの元のバージョンを作った時に1年くらい派遣されました。シアトルというか、郊外のレドモンドにある今Microsoftの本社があるところに行きました」

「その時に、日本から海外に行かれたということで、暮らす環境だったり仕事のやり方だったり、すごく違いを感じたのではないかと想像するのですが、その辺りはどうでしたか？」

「そうですね、だいぶ違いましたね。しかも当時ってインターネットまだないんですよ。あるんですけど、Webはまだ作られていない時だったんですね。ちょうど私がレドモンドにいた時に、Webっていうものがあるらしいぞというので、NASAの宇宙の写真とかを最初に見たのを覚えているくらいなんですよね。なかったんですよ」

「つまりどういうことかというと、行く前に現地の情報とかそんなに分かんなくて、ニフティサーブという今のニフティの原型があり、そこがアメリカのコンピュサーブっていうパソコン通信にゲートウェイで接続きたので、そっちの方のフォーラムに入ったりしていろんな情報を入手したりしていたんですね。また逆に、アメリカ勤務していても、日本の情報がほとんど入ってこないんですよ」

「そうなんですね。

「なので、どっちがいいかというと正直分からなくて、昔は昔でそういった現地に行かないと分からないものを、現地に行って分かる面白さとか醍醐味があったんですけれども、不便といえば不便でした」

＜参考情報＞

日本DEC：日本ディジタルイクイップメント株式会社
ニフティサーブ：NIFTY-Serve、のちにNIFTY SERVE、1987年から2006年までニフティ株式会社が運営していたパソコン通信サービス。
コンピュサーブ：CompuServe、アメリカのパソコン通信会社。

インターネットで知ることと、現地に行って知ることの話

「なるほど、それは良し悪しあるんですね。今は狙った検索ワードを入れれば、大抵のものはヒットして分かるという状態になっているじゃないですか。それは日本にいても海外にいても見れるので、ネットで繋がっていれば一緒に仕事もできるし、知らなかった情報もすぐネットでキャッチアップできるような環境に今は変わってきている気がする。なので、海外に行って困るというのは前と比べると少なくて済む状況になってきているのではないかと思うのですが」

「そうですね。今僕も向こうにいるわけなんですけど、インターネットから大体情報が入ってきますし、すごく変わったかなと思うのが、テレビもすごく変わったと思うんですよ。家にソニーさんが作っているnasne（ナスネ）™というサーバーを、日本の自宅に置いているんですね。そうすると、海外からも日本のテレビ番組が普通に見れるんですよ」

「撮りためておいて、普通にそれが見れるという感じなんですか？」

「そうですね。撮りためもできるし、リアルタイムで見ることもできたりするので、アメリカにいるのに日本のテレビ番組を見てたりすることもあったりして、その辺は本当に情報がすごく入って来やすい。自分で取りに行こうと思えばいつでも行けるという状態になっているというのは間違いなくあるという気はするんですけど、1つ僕が結構思うのは、情報ってやっぱり情報なんですよ」

「はい」

「重要なのって情報の周りにある雰囲気だったり、文化的な背景だったり、そういうところが結構重要だということを僕は思っているんです。情報は入ってきやすくなってきたけど、ディテールのところは現地に行かないと分からないかなという気がしているんですけど、及川さんその辺いかがでしょうか？」

「そうなんですよね。英語圏でアメリカにいると、インターネットで得られる情報と、現地で得られる情報っていうのはもちろん差はあるけれど、そんなには多くないんですね」

「はい」

「ただ他の国に行った時に、我々が現地の言葉を知らなかったりすると、どうしても英語の情報に頼るじゃないですか。もしくは日本語の情報に頼ると。例えばヨーロッパに行った時に現地の人から教えてもらったのは、トリップアドバイザーの情報でいい店だって言われて行くわけですよ。それはアメリカ人のテイストにあってる店がレコメンドされるだけだよってはっきり言われたんですね」

「なるほど（笑）」

「だから、本当に現地の人が行くところで推奨している店が、そこに引っかかるとは限らないということを言われたから、やっぱりインターネットで得られる情報と現地の本当の情報は必ずしも一致していないことは覚えておいたほうがよくて。ただ、今ちょっとトリップアドバイザー、最近元Googleの僕の友人が日本法人の社長になったんですけど」

「そうなんですか（笑）」

「まあ、それはいいんですが（笑）」

「だけれども、逆に言うとそれはそれで便利なんですよ。なぜかというと、トリップアドバイザーでいいって言われているのは確実に英語が通じたりだとか、アメリカ人と日本人のテイストはだいたいあっているんで、そんなに間違いはない」

「ただ、やっぱり今言ったみたいに、本当に現地で価値があるって言われているものが英語で情報として流通しているかどうか分からないところはあったりするんで、やっぱりネットの情報で便利になったと思う反面、ネットだけでいろんなところに行こうとしたら、実は現地でしか味わえない醍醐味だとか、本当に大事なものを見失ってしまう可能性はあるかもしれないなって思いますね」

「そういう側面もありますね」

「例えば、逆にふっていいですか？　地方に東京から移住した加藤くんに聞きたいんですけれども」

「はい」

「要は、もう日本語で普通に会津若松の情報って分かるじゃないですか。でも現地に行ってみたら全然違ったっていうようなことって、実際に暮らし始めてみてからあるんですか？」

「いくつかやっぱりありますね。そもそもあんまり店がないのかなって思っていたら、みんながWebにあげていないだけで、実際に足を運んでみるとすごく美味しい店が近くにたくさんあったりとか、そういうギャップがあったり。あとは食べログとかを見てお店を選ぶんですけど、評価が普通なお店でも行ってみると店員さんがすごく優しくてフレンドリーで、何回か行ったら一品増やしてくれたりとか、これはちょっと分からないだろうなとは思いました。それは現地に行ってこそ分かるものだなって分かりました」

「今は逆に検索すればわかるから、ネットがつながってるから、情報共有も簡単にできるだろうと思い込むのは危険なところはありますよね。その辺は会社によってやり方は違うと思うんですけど。Microsoftなんかはレドモンドに社員を皆さん集結させて、なるべく物理的に近くにいてコミュニケーションロスを減らそうとしているとどこかで見たのですが、そういう会社もあれば、Googleは逆にどこにいても仕事はできるからというかたちで、物理的に散らばって要所要所で集まって意思疎通をしていると聞きました」

「そういうスタイルや、会社さんごとにいろいろなやり方でやっていると思うんですが、1つ言えるのは以前よりも単純な情報の共有はすごくやりやすくなったので、海外にいきなり行くとなった時も、以前のような準備がそこまでいらなくなってきているのかなと感じました」

＜参考情報＞

ナスネ：nasne、地上/BS/110度CSに対応したデジタルチューナーと大容量ハードディスクを搭載したネットワークレコーダー＆メディアストレージ

──後編は「日本と海外の違いの話」「年齢が違う人とのコミュニケーション」などの話を紹介します。

（撮影・写真提供：HTML5 Conference 2016撮影スタッフ）

MIDIデバイスの準備不要！お手軽な『MIDIアプリ』実装法

河合良哉 — Fri, 27 Nov 2015 00:00:53 +0000

連載： MIDIデバイスの準備不要！Web MIDI APIを使いこなそう！ (2)

この記事は、Web MIDI APIを題材にした連載の第二回目です。（第一回目はこちら）

第一回目はWeb MIDI APIでMIDI Inputデバイス、Outputデバイスを列挙し、利用する実装方法を説明してきましたが、詳細の実装の説明までできていませんでした。第二回ではx-webmidiというPolymer Elementを使い、第一回で実装した部分、また実装ができていなかったHotplugを含めて、お手軽に実装してしまう方法をご説明します。

前回に引き続き、今回もMIDIデバイスの準備は不要な内容になっていますので、最後までお試しいただけると嬉しいです。

Polymerとは？

「Web Componentsを簡単・便利にするライブラリ」です。Polymerを使うと簡単にWeb ComponentsのElementを作成することが可能です。本サイトHTML5Expert.jpでも連載記事がありますので、ぜひご覧ください。

基礎からわかる Web Components 徹底解説

そして今回は、Web MIDI APIをPolymer Element化したx-webmidiを使って、以下の2つのアプリの実装をしていきます。

InputからOutputにMIDIメッセージを中継するアプリ
SMF（Standard MIDI File）を再生するアプリ

x-webmidiとは？

Web MIDI APIは、外部のMIDIデバイスとUSB-MIDIで接続するAPIです。API自体には「デバイスをリストする」、「デバイスへMIDIメッセージを送信する」、「デバイスからのMIDIメッセージを受信を行う」、また、接続に関しては「Hotplug」が、それぞれサポートされています。

しかし、これらを実装するのは少し手間がかかります。自分自身の体験としては、複数アプリケーションを書いていると「アイデアをアプリケーションに落としこむ時、MIDIデバイスの制御の部分に労力をかけるのは極力抑えたい」と思うようになりました。そこで考えついたのが、Polymerを使って基本的な操作はElementにしてしまう方法です。そして生まれたのが「x-webmidi 」です。

さっそく実装してみよう

環境整備

連載第一回目の環境整備と同じです。ここでは手短に説明します。
Polymer本体、今回利用するx-webmidiをそれぞれダウンロードします。

開発するディレクトリを作成して、ダウンロードした2つのファイルを解凍し、以下の構成になるように配置してください。その後、同一ディレクトリにindex.htmlを作成します。

以上で環境整備は完了です。

では、実際に実際に開発を行っていきましょう。

InputからOutputにMIDIメッセージを中継するアプリ

作成する index.html のコード全体はこちらになります。それでは順に説明していきます。

1行目：Web ComponentsのPolyfillを読み込み
2〜4行目：Web MIDI API（x-webmidi）、仮想MIDI Outputデバイス(wm-webmidilink)、仮想のInputデバイス(wm-pckeyboard)のPolymer ElementをImport
5行目：x-webmidiをアクティベート

x-webmidiの属性は以下の通りです。

input： MIDI Inputデバイスを利用する場合に追加
output： MIDI Outputデバイスを利用する場合に追加
sysex： System Exclusive メッセージを使う場合に追加

今回、System Exclusive メッセージは使わないので、inputとoutputのみを記述します。

7行目：wm-webmidilinkをアクティベート
8行目：wm-pckeyboardをアクティベート

以上で準備は完了です。次にMIDIデバイスのリスト表示を行います。

input: 

output:

x-webmidiinputとx-webmidioutputの属性は以下の通りです。

additionalid：仮想のデバイスを追加する場合、そのタグのIDで指定します
autoselect ：自動選択して欲しMIDIデバイス名を指定します
autoreselect ：現在指定しているデバイスが切断され再接続した場合に自動選択します

今回は仮想のデバイスを追加するため、属性 additionalid に、input側はpckeyboard(wm-pckeyboardタグのID名)、output側はwmlink(wm-webmidilinkタグのID名)をそれぞれ指定しています。最後に入力されたMIDIメッセージを表示する場所を作ります。

Inputから受け取ったMIDIメッセージを中継するためのJavaScriptを記述していきます。

var output=document.getElementById("midi-output");
    window.addEventListener("midiin-event:midi-input", function(event){
        for(var i=0, out=[]; i");
        while(ex_msg.length>19) ex_msg.pop();
        div_msg.innerHTML=out.join(" ")+"
" + ex_msg.join("
");
        if(output.checkOutputIdx()!="false") {
            output.sendRawMessage(event.detail.data);
        }
    });

1行目：MIDI OutputのObjectを取得
2行目：MIDI InputからのメッセージはEventとして飛んできますので、EventListenerをつける。Event名は”midiin-event:”に続き x-webmidiinput タグで指定したIDになる。MIDI Inputデバイスから入力したMIDIメッセージは event.detail.data。
3行目：「MIDIメッセージを表示する場所」に表示して、分かりやすいように16進数の文字列にキャスト
4行目：「MIDIメッセージを表示する場所」のElementを取得
5, 6行目：「MIDIメッセージを表示する場所」の表示を新しいメッセージから順に並べるのと同時に表示する行数を絞る
7行目：MIDIメッセージを「MIDIメッセージを表示する場所」に表示
8〜10行目：Outputデバイスが選択されていたら、選択されているデバイスに対してInputから入力されたMIDIメッセージを送信。

これで、InputからOutputにMIDIメッセージを中継することができました。

SMF（Standard MIDI File）を再生するアプリ

次にMIDIというと必ず出てくるであろうSMF（Standard MIDI File）の再生です。

SMFはMIDIメッセージ1つ1つに時間情報を付加して、規定のフォーマットにまとめたバイナリファイルです。ここで付加された時間通りにMIDIメッセージを音源モジュールに送ることで、自動演奏ができる仕組みになっています。

SMFをWebブラウザ上で再生するには、SMFのバイナリを読み解いて（パース）、付加されている時間通りにMIDIメッセージを音源モジュールに送信する、という手順になります。しかし、このバイナリファイルをパースするためにはSMFのフォーマットを勉強しないといけません。この問題を解決するべく、SMFのバイナリをパースする部分を、「wm-smfplayer」というPolymerのElementにしてみました。このElemetでSMFを再生するアプリを作ってみます。

作成する index.html のコード全体はこちらになります。それでは順に説明していきます。

1〜3行目：「InputからOutputにMIDIメッセージを中継するアプリ」と同じ
4行目：SMFをパースするElementを読み込む。SMFの中にはSystem Exclusiveが入っている場合があるので属性を書いています。

続いて、wm-webmidilinkタグを記述して仮想のOutputデバイスをアクティベートし、SFMをパースする wm-smfplayer タグを記述しています。wm-smfplayerの属性は以下の通りです。

midifile： SMFのURL（パス）
latency ： MIDIメッセージをバッファする時間

Latencyを指定してMIDIメッセージをバッファリングすることで、より時間に正確な再生が可能になります。
次に、MIDI Outputデバイスのリスト表示、SMFの再生制御のためのボタンを追加します。

output:

最後に、SMF再生中に取得したMIDIメッセージを、選択されたMIDI Outputデバイスに送信するためのJavaScriptを記述していきます。

var out_elem=document.getElementById("midi-output")
var output=null;
out_elem.addEventListener("midioutput-updated:midi-output", function(event){
    output=out_elem.getOutputDevice();
    document.getElementById("startPlay").removeAttribute("disabled");
    document.getElementById("stopPlay").removeAttribute("disabled");
    document.getElementById("allSoundOff").removeAttribute("disabled");
}, false);
var smfPlayer=document.getElementById("smfplayer");
document.getElementById("startPlay").addEventListener("mousedown", function(){
    if(output!=null) smfPlayer.startPlay(output);
});
document.getElementById("stopPlay").addEventListener("mousedown", function(){
    smfPlayer.stopPlay();
});
document.getElementById("allSoundOff").addEventListener("mousedown", function(){
    var output=document.getElementById("midi-output").getOutputDevice();
    smfPlayer.allSoundOff();
});

各行での処理の内容は以下の通りです。

1行目：MIDI OutputのElementのObjectを取得
2行目：変数outputの初期化
3〜8行目：MIDI Outputがユーザに選択したObjectの取得、再生制御のボタンの有効化
9行目：wm-smfplaymerのElementのObjectを取得
10-19行目：それぞれの再生制御ボタンが押された時の動作

以上で、実装完了です。

おわりに

今回はWeb MIDI APIをPolymerのElementにしたx-webmidiを使用して、2つのアプリケーションを作りました。そして、第一回目と比べるとコードの量が減るとともに、その多くがJavaScriptによる手続き型の実装ではなく、HTMLによる宣言型の実装になりました。宣言型で書くことで見通しがよく、手軽に実装できるようになります。

ここで「手軽になった」ということは、「アイデアを具現化するまでの道のりが短くなった」ということを示していて、実際に開発を行う際は、考えついたアイデアの実現のみに集中してすることができるようになります。

次回は、MIDIはMusical Instrument Digital Interfaceの略称ではありますが、文字通りの音楽という枠を超えて別の分野でも利用可能、という実例をご紹介しようと思います。

お楽しみに！

MIDIデバイスの準備不要、Web MIDI APIの基礎

河合良哉 — Tue, 13 Oct 2015 02:00:51 +0000

連載： MIDIデバイスの準備不要！Web MIDI APIを使いこなそう！ (1)

この記事は、Web MIDI APIを題材にした連載の第一回目です。

Web MIDI APIはWebブラウザのAPIですが、Webブラウザの中で完結はしません。Webブラウザと外部のMIDIデバイスとの間でMIDIによる通信を行うためのAPIなのです。Webブラウザと外部デバイスとのやりとりでというとGamepad APIを想像される方もいらっしゃると思いますが、Gamepad APIはGame PadからWebブラウザへの一方通行の通信を行うのに対し、Web MIDI APIはWebブラウザと外部MIDIデバイスとの間で、双方向の通信が可能です。

昔ホームページで鳴っていたやつ

ところで、MIDIってご存じですか？ MIDIと聞くと、「昔ホームページで鳴っていたやつ」 を思い出される方が多いと思います。そもそもMIDIとは、「電子楽器の演奏データを機器間でデジタル転送する」ための物理的な回路・インターフェイス、通信プロトコル、ファイルフォーマット等の複数の規格から成り立っている規格の総称です。そして、Web MIDIを語る上で重要になるのが、「MIDIプロトコル」と「物理的な回路・インターフェイス」というキーワードです。

冒頭の「昔ホームページで鳴っていたやつ」 ですが、あれはMIDIの中のファイルフォーマット（Standard MIDI File）を、OSが持つ音源を使って再生したモノとなります。「つまりどういうこと？」という方もいらっしゃると思いますが、この後、解説する、MIDIプロトコルの説明をご覧いただければ理解できるはずです。

まず最初は「MIDIプロトコル」から解説していきます。

MIDIプロトコル

MIDIとは先述した通り、「電子楽器の演奏データを機器間でデジタル転送する」ための規格でした。まず、演奏データ、つまり「音楽」とはどういうモノで成り立っているか、誰もが小学生で触ったであろうリコーダー（縦笛）を例に考えてみまます。

リコーダーは口にくわえて息を吹き込むことで音が出ます。強く吹けば力強い音が出るし、弱く吹けば優しい音が出る、つまり息の強さで 音の強弱が表現 できます。それから、押さえる穴の数を変えれば高い音階の音が鳴ったり、低い音階の音が鳴ったりする、つまり穴の数を変えることで 音程の変化 をさせているのです。これら 音の強弱が表現 、 音程の変化 の2つの情報があれば、音を再現できそうですよね。実はMIDIプロトコルで音を鳴らす部分は、この2つの情報を1つのメッセージとして扱うことで「機器間での演奏データの転送」を実現しています。さらに、MIDIには チャンネル というものがあり、これを使い分けることで16個の独立したメッセージを扱うことが可能になります。

それでは、実際にMIDIメッセージを見てみましょう。「音を出す」、「音を停止」する場合は、このように16進数でに3バイトを1つのMIDIメッセージとして指定します。

音を出す(noteOn)

音を止める(noteOff)

チャンネル: 0〜15を16進数で指定
音階： 21(最も低いラ：27.5Hz)〜108(最も高いド：4186Hz)を16進数で指定
音の強さ： 0〜127を16進数で指定（音を停止の場合、機器によって解釈が違う場合もある）

MIDIメッセージの特徴の1つは、このように 「何を」 、 「どのくらい」、 「どうする」 の3つの内容が1組になっているところです。この2つのメッセージが分かれば音が出せるので、早速実装してみましょう。

Web MIDI APIを使って実装する

Web MIDI APIの仕様に中で、実装に必要な処理は以下の4つです。

コンピュータに接続されているMIDI Input/Outputの機器を列挙
利用したい、MIDI機器を選択
MIDI Input機器からの入力はEventで上がってくるので、EventListenerで処理を書く
MIDI Output機器にMIDIメッセージを送信する

今回は単純に、MIDI Input機器からの出力をブラウザで中継して、MIDI Output機器に送信するプログラムを書いてみたいと思います。まずはライブデモを御覧ください。

inputのリストから「PC-Keyboard」をoutputのリストから「GMPlayer(WebMIDILink)」を選択してください。

左：inputのリストから「PC-Keyboard」を選択し、横に表示される鍵盤のアイコンをクリックした図、
右：outputのリストから「GMPlayer(WebMIDILink)」を選択し、横に表示されるMIDI端子のアイコンをクリックした図

「PC-Keyboard」と「GMPlayer(WebMIDILink)」は、MIDI機器がなくても動かせるように、PCのキーボードで鍵盤、また、MIDIメッセージで発音するWeb Audioで作った音源モジュールをPolymerで仮想のデバイスにしています。（「GMPlayer(WebMIDILink)」は@g200kgさんが開発した音源です）

環境の整備

今回は、PolymerとPolymerのElement(x-webmidiというElementのExtraのElement)を使いますので、ダウンロードしてきます。

例えば、 hx_webmidi_01 ディレクトリを作成して、その下に bower_components ディレクトリを作成し、リンクからダウンロードしたファイルを保存してください。(x-webmidiは解凍するとファイル名にバージョン番号が付いてしまいますので削除してください)
そして、これからコードを追加していく index.html を作成します。

以上で環境整備は完了です。

Polymerのコードを実装

では、次に実装するコードを見てみましょう。今回作成する index.html のコード全体はこちらになります。早速、HTML部分を上から説明していきます。









input: 


output:

Web MIDI APIで列挙したMIDIデバイスを選択するためのSelectタグを書いておきます（9行目、10行目）。また、MIDI Inputデバイスから受けたMIDIメッセージを表示するエリアもつけています(12行目)。尚、今回は、MIDIデバイスがなくても楽しめるようにPolymerを使っています（1行目から7行目）が、ここでは深く触れません。Selectタグの直後のも同様にPolymerに関連する記載のためここでは触れません。

MIDIデバイスの列挙

続いてWeb MIDI APIを使った実際の処理の説明です。

navigator.requestMIDIAccess({sysex:false}).then(successCallback, errorCallback);
function successCallback(access) {
  (後ほど詳しく)
}
function errorCallback(msg) {
  console.log("[ERROR] ", msg);
}

requestMIDIAccessはPromiseの形になっていますので、まずは「システムエクスクルーシブ(sysex)」を使用するか・使用しないかを設定し、実行します。成功すればsuccessCallbackへ、失敗すればerrorCallbackへと処理が遷移します。ここで「システムエクスクルーシブ」とはMIDIメッセージの1つで、電子楽器機器固有の機能を制御するために使われます。電子楽器内のデータのバックアップで使うことも多いため、Web MIDI APIではセキュリティの観点から、ユーザの許可（ダイアログを表示）を得ることが利用する条件となっています。

Promiseが成功し、successCallbackへ遷移した場合の説明です。

// MIDI Inputデバイスの配列を作成
var inputIterator = access.inputs.values();
for (var o = inputIterator.next(); !o.done; o = inputIterator.next()) {
    midi.inputs.push(o.value);
}
// 仮想のMIDI Inputデバイスを追加
midi.inputs.push((document.querySelector("#pckeyboard")).getInput());

// MIDI Outputデバイスの配列を作成
var outputIterator = access.outputs.values();
for (var o = outputIterator.next(); !o.done; o = outputIterator.next()) {
    midi.outputs.push(o.value);
}
// 仮想のMIDI Outputデバイスを追加
midi.outputs.push((document.querySelector("#wmlink")).getOutput());

Prmiseが成功すると、コンピュータに接続されているMIDIデバイスの情報を引数で渡されます。MIDI Inputデバイスの場合access.outputs.values() 、MIDI Output デバイスの場合はaccess.outputs.values()を実行することで、それぞれのデバイスのリストをIteratorの形で取得できます。ここでは機器情報の配列 midi.inputs、midi.outputsを作成します。最後に仮想のデバイスを取得して追加しています。

MIDI Outputデバイスのリスト表示と選択時の処理

// MIDI Outputデバイスのリスト表示と選択時の処理
var osel=document.querySelector("#midi-output");                                                                                            
for(var i=0; i=0 && midi.outputs[outputSelIdx].virtual==true) {
        document.querySelector("#virtual-output").appendChild(document.querySelector("#wmlink").getElement());                              
    } else {
        document.querySelector("#virtual-output").innerHTML=""
    }
});

先ほど作成したMIDI Inputデバイスの配列の要素を、リストとして表示するためにselectタグにoptionとして追加します。（2行目〜5行目）リストの選択の変化に対してEventListenerを設定します。（6行目～14行目）ここで行っているのは、選択された機器に割り振られたIDを記憶（7行目）、続いて、もし仮想デバイスの場合はリストの横にアイコンを追加（9行目～13行目）を行っています。

MIDI Inputデバイスのリスト表示と選択時の処理

// MIDI Inputデバイスのリスト表示と選択時の処理
var isel=document.querySelector("#midi-input");                                                                                             
for(var i=0; i=0 && midi.inputs[inputSelIdx].virtual==true) {
        document.querySelector("#virtual-input").appendChild(document.querySelector("#pckeyboard").getElement());                           
    } else {
        document.querySelector("#virtual-input").innerHTML=""
    }
});

先ほど作成したMIDI Inputデバイスの配列の要素をリストとして表示するために、selectタグにoptionとして追加します。（2行目～5行目）リストの選択の変化に対してEventListenerを設定します。（6行目〜18行目）ここで行っているのは、選択された機器に割り振られたIDを記憶（10行目）、MIDI Inputデバイスからの入力を受ける為の関数をonmidimessageに指定(7行目〜11行目)、もし既MIDI Inputデバイスからの入力を受ける機器が指定されていたらonmidimessageも解除（7行目〜9行目）、続いて、もし仮想デバイスの場合はリストの横にアイコンを追加（8行目～12行目）を行っています。

MIDI Inputデバイスからの入力を受けた時の処理

ここでは、MIDI Inputデバイスから取得したMIDIメッセージを、もしMIDI Outputデバイスが指定されていたら加工はせずにそのまま送信しますので、以下のようになります（7行目～9行目）。MIDI InputからのMIDIメッセージはevent.dataで取得することが可能で、MIDIメッセージは画面表示します（4行目、5行目）。

function eventOut(event) {
// MIDIメッセージを表示
for(var i=0, out=[]; i");
    while(ex_msg.length>19) ex_msg.pop();
    div_msg.innerHTML=out.join(" ")+"
" + ex_msg.join("
");

    if(parseInt(outputSelIdx)>=0) {
        midi.outputs[outputSelIdx].send(event.data);
    }
}

以上で、接続されたMIDI Inputデバイスから、指定したMIDI Outputデバイスへメッセージを送信するWebアプリケーションが作成されました。PCのキーボードで演奏ができるようになったはずです。

もし電子ピアノ等の電子楽器をお手持ちの場合はUSB端子がついてないかご確認ください。そして、もしUSBで接続可能であれば接続し、作成したWebアプリをリロードしてみてください。inputもしくはoutputのどちらかに接続したデバイスがリストされるはずです。（ポケットミク、eVY1シールドも操作できます）

また、MIDIメッセージは単なるメッセージですので、音以外に割り当てたり、鍵盤に複数のMIDIメッセージを割り当ててフレーズを再生する等、アイデア次第で様々なモノのコントローラとして活用することができます。今回は、花火をモチーフに（季節外れですが…）こんなアプリケーションを作ってみました。鍵盤を弾くと、音とともに花火の打ち上がります。この音はもちろんMIDIメッセージで音源モジュールを鳴らしています。

おわりに

いかがでしたでしょうか？Web MIDIはそんなに難しくない、いやむしろ簡単であることをお分かりいただけたと思います。普段Webの開発をしていると「外部デバイスと接続して何かをする」という発想はなかったかもしれませんが、Web MIDIを使うとそういった実装もWebだけでできるようになります。「何かを作る」場合に選択の1つに是非Web MIDIを加えてみてください。

さて、今回は「MIDIとは何か？」というところから「Web MIDI APIの実装」、そして「MIDIを別の用途に応用してみる」というところを紹介してきました。しかし「難しくはないけど、少し準備が長い」と感じたりしていませんか？

実はWeb MIDIにはHotPlugの機能もありますが、今回の実装ではそこまで紹介しきれていないのです。そこで次回は、今回の記事にも少し登場した、Web MIDIと仮想デバイスの実装が一瞬でできてしまうx-webmidiというPolymerのElementについて、さらに具体的に紹介する予定です。

お楽しみに！

【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！

河合良哉 — Mon, 23 Mar 2015 04:01:41 +0000

連載： HTML5 Conference 2015 特集 (3)

ブラウザ上で音を扱うというと、直接音を加工できるWeb Audio API、ブラウザから直接MIDIデバイスと接続できるWeb MIDI APIの2つがここ数年の間に利用可能になり、実際のWebサイトでも使われるようになりました。
今回は「ハンズオンだともっとよかった」というお声をいただきましたHTML5 Conference 2015での講演内容を元に、2つのAPIの説明と、実際にブラウザ上に電子楽器の1つであるシンセサイザーを作ってしまうという記事です。

記事中のサンプルはGitHubに公開していますので、そちらも合わせてご参照ください。

利用するAPIの説明

Web Audio API

短く一言で説明すると「ブラウザ上で音を直接作ったり、いじったりすることのできるAPI」です。もう少し難しく言うと「ブラウザ上で波形処理を可能にしたAPI」となります。
Web Audio APIの理解を深めるためにまず「音」とは何かを考えてみたいと思います。Wikipediaには以下のように書かれています。

物の響きや人や鳥獣の声

（物体の振動が空気などの振動（音波）として伝わって起す）聴覚の内容

またはそのもととなる音波

「引用」『フリー百科事典　ウィキペディア日本語版』より。
2015年3月16日 8:30 UTC
http://ja.wikipedia.org/wiki/%E9%9F%B3

響き、振動、音波と出てきました。実は、音を目に見える形にすると波になるのです。Web Audio APIも原理は同じで、波を与えて音として出力しています。そして、その波の形（波形）をいじる（処理）して様々な音を作り出すとご理解いただけばよいと思います。

原理の説明はここまでにして、最初に声を取得して、その声をWeb Audioでピッチシフト（音を高くしたり、低くしたりする効果）、Delay（音を遅らせる効果）の加工を行うデモをご紹介いたします。（できるだけマイクとヘッドホンをご用意ください）ピッチシフト＆Delayのライブデモ

ノブとボタンの説明▼

(1) PitchShift ON/OFF

(2) Shiftの種類：(上:高い、下：低い)

(3) Delay ON/OFF

(4) Delayの種類：並列/直列

(5) Feedback量

(6) Delay時間

ノードグラフ（Web Audioでは処理をする1つ1つをノードと呼び、それらをつなぎ合わせて1つのグラフにします）は上図のようになっています。ピッチシフト＆DelayのライブデモのDelayをONにして、種類を直列にする（（4）のスイッチを下にする）とこのような接続になります。直列につなげると、マイクで拾った音が(6)Delay時間だけ遅れてスピーカから出るようになります。
このノードグラフをWeb Audio APIで書くとこうなります。（ピッチシフト部分、Delay部分をObjectにしてまとめている関係上、ゼロから書くともう少し長く、複雑になります）（ライブデモ）

var ctx=new AudioContext();
var mic;
var psin=ctx.createGain(), psout=ctx.createGain();
var delayin=ctx.createGain(), delayout=ctx.createGain();

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia({audio : true}, successCallback, errorCallback);
function successCallback(stream) {
    mic = ctx.createMediaStreamSource(stream);
    mic.connect(psin);
}
function errorCallback(msg) {
    console.log(msg);
}
var pshift=new pitchShift(ctx);
psin.connect(pshift.getSrc());
pshift.connect(psout);

var delay=new delayProcess(ctx);
delayin.connect(delay.getSrc());
delay.connect(delayout);

psout.connect(delayin);
delayout.connect(ctx.destination);

このように、Web Audio APIを使うと、今まではプラグインを使う以外に方法がなかったWebブラウザ上でのリアルタイムな波形処理を、比較的簡単に行うことが可能です。

Web MIDI API

短く一言で説明すると「ブラウザとデバイス間でMIDIメッセージを送受信するためのAPI 」です。MIDIとは Musical Instrument Digital Interface の略で、電子楽器の演奏データをデバイス間でデジタル転送するための世界共通規格であり、物理的な送受信回路・インタフェース、通信プロトコル、ファイルフォーマットなど複数の規定からなっています。Web MIDI APIは特にこの中の通信プロトコルをWebブラウザへの実装したAPIです。

Web MIDI APIの特徴は外付けのMIDIデバイス※0とWebブラウザが直接接続できるところです。ですのでWeb Audio APIのようにそれ単体で音が鳴ったりする訳ではなく、MIDIデバイスからWebブラウザで動くアプリケーションをコントロールしたり、またWebブラウザからMIDIデバイスコントロールするために利用します。よって本記事では最初にWeb Audio APIを使った電子楽器アプリケーションを作り、それをWeb MIDI APIを使って外付けのMIDIデバイスからコントロールするというシナリオで進めさせていただきます。

※0 MIDIデバイス：楽器関連では鍵盤をはじめ、ドラムパッド、スライダー、ノブ等があり、楽器以外ですと、ステージ上のセットを楽器等と一緒にMIDIでコントロールしてしまおうという発想で照明機器、その他噴水、爆破、炎の制御に使われていることもあります。

なお、やや長い記事になってしまいましたので、ソースコードの量の少なさを体感していただき、その解釈は後回しにしてデモを触っていただくのがよいと思います。「電子楽器を実装する」というと難しそうに聞こえるかもしれませんが、そこまで難しくもありませんので実装に挑戦していただけるとうれしいです。

Web Audio API で電子楽器を実装する

電子楽器と言ってもその種類は複数あります。今回はその中からアナログシンセサイザーとFMシンセサイザーを実装してみます。

Web Audio API でアナログ・シンセサイザー

アナログ・シンセザイザーはアナログ回路を用いて信号処理を行うことで音を出す方式のシンセサイザーです。そのアナログ回路をWeb Audio APIを使って実装していきます。まずはどんな音が出るか完成形のデモで試してみてください。

画面上にある２つのスライダを動かすと音色を大きく変化させることができると思います。それでは原理を見てみましょう。

このシンセサイザーは以下の3つの部品を使っています。

基本の信号・波形を作り出す発振機※1 （VCO0、VCO1）
波形を加工するフィルタ（VCF）
低い周波数の制御信号を発振機から発生させて送ることで周期的な変化を与える（LFO）

これらを接続して下図のノードグラフを作ります。

※1 発振機：波を発生させる部品で、オシレータ（Oscillator）とも呼びます。

ソースコードは以下のようになります。（ライブデモ、ソースコード）

var ctx=new AudioContext();
var vco0, vco1, lfo, vcf;

vco0=ctx.createOscillator();   // VCO0を作成
vco1=ctx.createOscillator();   // VCO1を作成
lfo=ctx.createOscillator();    // LFOを作成
vcf=ctx.createBiquadFilter();  // VCFを作成

vco0.connect(vcf);             // (1)の接続
vco1.connect(vcf);             // (2)の接続
lfo.connect(vco0.frequency);   // (3)の接続
lfo.connect(vco1.frequency);   // (4)の接続
lfo.connect(vcf.detune);       // (5)の接続
vcf.connect(ctx.destination);  // (6)の接続

// 値を変更
//vco0.type="sawtooth";
//vco1.detune.value=-35;
//lfo.frequency.value=2;
//vcf.frequency.value=10000;

// Oscillator（発振機）を動作させて発音
vco0.start(0);
vco1.start(0);
lfo.start(0);

// 音階を変える
vco0.frequency.value=440;
vco0.frequency.value=440;

これで発音されます。が、このままですとそのままの音が出るだけですので面白くありません。そこで、それぞれのノードのパラメータを変更してみます。コメント化していた「値を変更」の以下4行を生かしてみます。（ライブデモ、ソースコード）
先程より音色が明るくなったと思います。完成形のデモのVCFのスライダを右に動かしたのと同様な値の変更を行いました。VCFは設定値より低い周波数を通す（ローパス）フィルタになっていて、そのパラメータを大きくしてより多くの明るい部分を通して明るい音色を出しています。

さらにシンセサイザーっぽい音にするべく、音量や音高などを時間で変化させるADSR ※2 と呼ばれてるエンベロープ※3 の機能実装します。ここではこのエンベロープを発振機（Oscillator）の音量（VCO0、VCO1）に適応しますので音量を調節するGainNodeを(1)、(2)へ追加します。そのソースコードは以下のようになります。（ノード作成、接続部分のみ抜粋）

※2 ADSR：下図のように波形を処理する場合のそれぞれも部分を指しています。

A (Attack) :音の出始め（例えば鍵盤を押した瞬間）から最大音量に到達する時間
D (Decay) : Attackで到達した音量最大からSustainに到達するまでの時間
S (Sustain) : Decayから音が出続けている間保つ音量
R (Release) : 演奏終了（例えば鍵盤を離した瞬間）から音量ゼロまで到達する時間

※3 エンベロープ：ピーク（最大値）を描いた曲線。特にここでは音量のピークを描く曲線のことを指しています。

var ctx=new AudioContext();
var vco0, vco1, lfo, vcf;

vco0=ctx.createOscillator();
vco1=ctx.createOscillator();
lfo=ctx.createOscillator();
vcf=ctx.createBiquadFilter();

// GainNodeを追加
vco0gain=ctx.createGain();
vco1gain=ctx.createGain();

vco0.connect(vco0gain); // vco0の接続先を変更
vco1.connect(vco1gain); // vco1の接続先を変更
vco0gain.connect(vcf);  // vco0gainからvcfへ接続
vco1gain.connect(vcf);  // vco1gainからvcfへ接続
lfo.connect(vco0.frequency);
lfo.connect(vco1.frequency);
lfo.connect(vcf.detune);
vcf.connect(ctx.destination);

// Oscillator（発振機）を動作させて発音
vco0.start(0);
vco1.start(0);
lfo.start(0);

続いて、実際にエンベロープを適応していきます。Web Audioには今回のエンベロープのような時間と目標値を指定して、その間を連続的に値を変化させるオートメーションの機能も提供されており、非常に簡単に実装することが可能です。今回は「指定した値まで直線的に連続して値を変化させる」linearRampToValueAtTime()を使いオートメーションを行います。ソースコードは以下になります。（エンベロープ部分のみ抜粋）

var now=ctx.currentTime;
var attack=0.5, decay=0.5, sustain=0.5, release=0.5;

var rootValue0=0.8; // Attackの目標値を0.8
vco0gain.gain.cancelScheduledValues(0);  // スケジュールを全て解除
vco0gain.gain.setValueAtTime(0.0, now);  // 今時点を音の出始めとする
vco0gain.gain.linearRampToValueAtTime(rootValue0, now + attack);  
// ▲ rootValue0までattack秒かけて直線的に変化
vco0gain.gain.linearRampToValueAtTime(sustain * rootValue0, now + attack + decay);
// ▲ sustain * rootValue0までattack+decay秒かけて直線的に変化

var rootValue1=0.8;
vco1gain.gain.cancelScheduledValues(0);
vco1gain.gain.setValueAtTime(0.0, now);
vco1gain.gain.linearRampToValueAtTime(rootValue0, now + attack);
vco1gain.gain.linearRampToValueAtTime(sustain * rootValue0, now + attack + decay);

1つ前のライブデモにエンベロープを適応させたライブデモはこちらになります。（ソースコード）

以上でアナログ・シンセサイザーの骨格が完成しました。楽器にするためには、パラメータをコントロールするスライダー、ノブ、VCOの周波数を変えて音階決める鍵盤を取り付ける作業を残すのみとなります。より個性的な音を作る場合、例えばノードグラフにVCOをもう1つ並列に追加したりすることで、更に多彩な音色を作ることが可能になりますので試してみてはいかがでしょうか。

ちなみに完成形のデモで使っているノブ、鍵盤は楽器、Audio系のアプリケーションには欠かせないカッコイイノブが簡単に取り付けられるスゴク便利なツールwebaudio-controlsというPolymerエレメント（詳しくはこちらをご覧ください）を利用して実装しています。

アナログ・シンセサイザーの実装の説明は以上になります。

Web Audio API でFMシンセサイザー

FMシンセサイザーのFMはFrequency Modulationの頭文字を取っていて、その名の通り周波数を変調して音を作り出す方法で、周波数変調と呼んでいます。（しかしながら、Web Audio APIに用意されている発振機では周波数変調ができません。よって、ここでは複数の波を掛け合わせFMシンセサイザーっぽい音を作っていることにご注意ください。本当のFMシンセサイザーを作るためには周波数変調可能な発振機の作成が必要です）
それでは、どんな音が出るか完成形のデモを試してみてください。

アナログ・シンセサイザーよりももう少し金属音的な音が出ていると思います。画面右上のプルダウンメニューにて音色も変更することができるようになっていますので、ぜひお試しください。

さて、実装に関してですが複数の発振機（Oscillator）を接続していきます。ここで、掛け合わせる側の発振機（Oscillator）をモジュレータ、その影響を受けて掛け合わされる側の発振機（Oscillator）をキャリアと呼びます。今回の実装はモジュレータとキャリアを1つづつ直列に接続し、更にモジュレータを自身にFeedbackしするような接続にします。ノードグラフに表すと以下のようになります。少し余談ですが、モジュレータの数が増やすと接続の組み合わせによって複数の接続方法が考えられます。その接続方法の1つ1つをアルゴリズムと呼んでいます。

ソースコードをみてみましょう。（ライブデモ、ソースコード）

var ctx=new AudioContext();
var modulator, carrier;
var modulatorGain, carrierGain, feedbackGain;

modulator=ctx.createOscillator();  // モジュレータを作成
carrier=ctx.createOscillator();    // キャリアを作成
modulatorGain=ctx.createGain();    // モジュレータの振幅を制御するためのGainの作成 (1)の途中にある
carrierGain=ctx.createGain();      // キャリアの振幅を制御するためのGainの作成 (2)の途中にある
feedbackGain=ctx.createGain();     // フィードバックの振幅を制御するためのGainの作成

// 接続
modulator.connect(modulatorGain);          // モジュレータとモジュレータGainの接続
modulatorGain.connect(carrier.frequency);  // モジュレータGainとキャリアの接続
carrier.connect(carrierGain);              // キャリアとキャリアGainの接続
carrierGain.connect(ctx.destination);      // キャリアGainとDestinationの接続
modulator.connect(feedbackGain);           // モジュレータとフィードバックGainの接続
feedbackGain.connect(modulator.frequency); // フィードバックGainとモジュレータの接続

carrier.frequency.value=440;

// 値を変更
//var presetList={ "name":"Elec.Piano1", "freqRatio":[1,9], "feedback":"0", "outRatio":[99,55]};
//var freq=540;
//modulator.frequency.value=presetList.freqRatio[1]*freq;
//carrier.frequency.value=presetList.freqRatio[0]*freq; // 音階を変える
//feedbackGain.gain.value=presetList.feedback;
//modulatorGain.gain.value=(presetList.outRatio[1]/100)*1024;
//carrierGain.gain.value=(presetList.outRatio[0]/100);

// 発振機（Oscillator）を動作させて発音
modulator.start(0);
carrier.start(0);

これで発音されます。が、アナログ・シンセサイザーの時と同様にそのままの音が出るだけで面白くないので、ここでもパラメータを変更してみます。コメント化されている「値を変更」の以下7行を生かしてみます。（ライブデモ、ソースコード）
なんと、音がキラキラしてきました。さて、ではアナログ・シンセサイザーのときと同じようにエンベロープを適応してみます。ソースコードは以下になります。（エンベロープ部分のみ抜粋）

var now=ctx.currentTime;
var m_attack=0, m_decay=0.5, m_sustain=0.3, m_release=0.5;
var c_attack=0.4, c_decay=0.3, c_sustain=0.7, c_release=0.4;

var modulatorRootValue=modulatorGain.gain.value;  // Attackの目標値をセット
modulatorGain.gain.cancelScheduledValues(0);      // スケジュールを全て解除
modulatorGain.gain.setValueAtTime(0.0, now);      // 今時点を音の出始めとする
modulatorGain.gain.linearRampToValueAtTime(modulatorRootValue, now + m_attack);
// ▲ rootValue0までm_attack秒かけて直線的に変化
modulatorGain.gain.linearRampToValueAtTime(m_sustain * modulatorRootValue, now + m_attack + m_decay);
// ▲ m_sustain * modulatorRootValueまでm_attack+m_decay秒かけて直線的に変化

var carrierRootValue=carrierGain.gain.value;      // Attackの目標値をセット
carrierGain.gain.cancelScheduledValues(0);        // スケジュールを全て解除
carrierGain.gain.setValueAtTime(0.0, now);        // 今時点を音の出始めとする
carrierGain.gain.linearRampToValueAtTime(carrierRootValue, now + c_attack);
// ▲ rootValue0までc_attack秒かけて直線的に変化
carrierGain.gain.linearRampToValueAtTime(c_sustain * carrierRootValue, now + c_attack + c_decay);
// ▲ c_sustain * carrierRootValueまでc_attack+c_decay秒かけて直線的に変化

1つ前のライブデモにエンベロープを適応させたライブデモはこちらになります。（ソースコード）

FMシンセサイザーの骨格もこれで完成しました。完成形のデモではパラメータの集合に音色名をつけて選択できるようにしていますが、アナログ・シンセサイザーのときのように、ノブやスライダでパラメータをコントロールするという方法も実現可能ですので、いろいろとお試しいただくと楽しいと思います。

アナログ・シンセサイザーとFMシンセサイザーの実装を通して「Web Audio APIで電子楽器を作ってみる」をやってきましたが、印象はどうでしょう。「Web Audio APIって簡単で楽しいな〜」と感じていただけているととても嬉しいのです！

さて、それでは次のセクションでは作成した電子楽器を本物の楽器のように鍵盤から演奏できるように、MIDIの接続を説明します。

Web MIDI APIを使う

先ほど少しだけMIDIとWeb MIDI APIについてご説明させていただきました。さらに理解したいという方はDTM界隈で著名な藤本健さんの”DTMステーション”に「今さら聞けない、「MIDIって何？」「MIDIって古いの？」」というMIDIを理解するのにドンピシャな記事が公開されましたので、詳細はそちらにお任せするとしてここでは粛々と実装を行っていきたいと思います。

ちなみに2015年3月現在でWeb MIDI APIが動作するブラウザはGoogle Chromeだけとなっています。また、その使用にはフラグの変更（Web MIDI APIを有効にする方法）が必要ですので、お試しになる前にフラグの変更を忘れないようにお願い致します。（MIDIデバイスがお手元になく、Macをお使いの場合はEasy MIDI Freeをお使いいただくと演奏できるはずです）

コンピュータに接続されているMIDIデバイスをブラウザで取得するには以下のコードを書き、MIDI InputとOutputのデバイスリストを取得します。

var inputs, outputs;
navigator.requestMIDIAccess.then({sysex:true})(successCallback, errorCallback);
function successCallback(midiAccess) {
  var inputIterator=midiAccess.inputs.values();
  for(var o=inputIterator.next(); !o.done; o = inputIterator.next()) {
    inputs.push(o.value);
  }
  var outputIterator=midiAccess.outputs.values();
  for(var o=outputIterator.next(); !o.done; o = outputIterator.next()) {
    outputs.push(o.value);
  }
}

MIDI Inputを使う場合、例えば使いたいMIDI Inputデバイスがinputsの先頭にリストされた（index=0）とします。その場合は以下のようにイベントハンドラをつけてあげます。

inputs[0]=function(event) {
  console.log("[MIDI Message] " + event.data + " [Timestamp] " + event.timestamp);
}

こうすることで、inputsの先頭にリストされている外部MIDIデバイスからMIDIメッセージが飛んできた場合にMIDIメッセージとタイムスタンプをコンソールに出力するようになります。

MIDI Outputを使う場合、例えば使いたいMIDI Outputデバイスがoutputsの先頭にリストされた（index=0）にあったとします。

outputs[0].send([0x90, 0x45, 0x3f], performance.now()+0);

とすると、outputsの先頭にリストされたMIDIデバイスに対して0x90, 0x45, 0x3fというMIDIメッセージを今すぐ(第２引数)送信します。MIDIメッセージ0x90, 0x45, 0x3fは、A4の音（0x45）を、50%の音量（0x3f）でチャンネル1を音を鳴らしなさい(0x90)、です。

といっても、MIDIに慣れ親しんでいない場合は実装のハードルが高いと思っています。そこでWeb MIDI APIの実装を簡単にするPolymerエレメントを公開しています。それが、 x-webmidiです。x-webmidiを使うとHTMLタグを5つ追加する（そのうち1つはWeb ComponentsのPolyfill）だけで、コンピュータに接続されているMIDIデバイスを取得して、セレクトボックスを生成して表示する、までを行ってくれます。MIDI InputデバイスからのメッセージはEventハンドラを、またMIDI Outputデバイスへのメッセージの送信は.sendRawMessage()を使い生のMIDIメッセージを、.sendHRMessage()を使いMIDIに慣れていない方でも分かるようにメッセージを送信できるようになっています。コードにするとこうなります。




 　　// MIDI Inputデバイスのセレクトボックスを表示 
 // MIDI Inputデバイスのセレクトボックスを表示

// MIDIメッセージを受信する
window.addEventListener("midiin-event:midi-input", function(event){
    // MIDIノートナンバーと、対応する周波数をConsoleに出力
    console.log("[noteNumber] "+event.property.noteNumber+" [frequency] "+event.property.frequency);
});

// outputsの先頭にリストされたデバイスにMIDIメッセージを送信する
var outputs=documenet.getElementById("midi-output");
outputs[0].sendHRMessage("noteon", 0, ["d4", 127], performance.now()+0);

それでは、Web Audio APIで作ったシンセサイザーを、MIDIデバイスから操作できるように実装していきます。演奏するためには、音階を変えるのですが、そのためには発振機（Oscillator）の周波数を変更する必要があります。MIDIの鍵盤は1つ1つに連番の番号がついていてこれをMIDIノートナンバー（ノートナンバーでページ内を検索）と言いますが、そのMIDIノートナンバーから周波数に変換する必要がありますが、それをコードにすると以下のようになります。

var freq=440.0 * Math.pow(2.0, (noteNo - 69.0) / 12.0); // noteNoはMIDI鍵盤の鍵盤番号

しかし、x-webmidiを使うとEventの引数として演奏した鍵盤の番号とそれに対応する周波数が取得することができるので、MIDIノートナンバーから周波数の変更をする必要はありません。これらをアナログ・シンセサイザーとFMシンセサイザーに実装をするとこのように実装できます。

（単音）アナログ・シンセサイザー：ライブデモ（ソースコード）
（単音）FMシンセサイザー：ライブデモ（ソースコード）

でもこのままだと単音しか出なくて楽しくないので、和音も出せるようにしちゃいます。そうするとこうなります。

（和音可）アナログ・シンセサイザー：ライブデモ（ソースコード）
（和音可）FMシンセサイザー：ライブデモ（ソースコード）

自作した楽器を両手で演奏できちゃいますよね。立派な楽器のできあがりです！「Web Audio APIとWeb MIDI APIを接続するのって簡単で楽しいな～」と感じていただけているととても嬉しいのです！

番外編

2015年3月13日（金）にWeb MIDI APIはGoogle Chromeにおいて実験的APIから標準のAPIとなることが承認されました。これによって、フラグを変更することなく（これが不要になる ▶ Web MIDI APIを有効にする方法）、Web MIDI APIを利用することが可能になります。この変更がChromeに適応されるまでにはもう少し時間がかかりますが、実現するとWeb MIDI APIがChrome APPsでの利用も可能になります。（Chrome Appsとは：英語）Chrome Appsにしてしまえばオフラインでも利用可能※4になります。ですので、ユースケースとして例えばライブでWeb Audio API、Web MIDI APIを使った自作楽器でパフォーマンスを行いたい、という場合に活躍してくれることでしょう。

そこで、今回ご紹介した2つのシンセサイザーをChrome Appsにして公開してみました。（Web MIDI API部分の動作はしません：2015年3月14日現在）

細かいところですが、Chrome AppsはCSP（Contents Security Policy）によってスクリプト（JavaScript等）をHTMLファイルへインラインで書くことが禁止されていますが、これら2つのアプリにはPolymerエレメントを使っています（インラインJavaScirptが書かれたHTMLファイルです）のでちょっと困ったことになります。それを解決してくれるBuildツールにvulcanizeがあります。”csp”オプションをつけてツールを実行することでHTML部分ととスクリプトを分けてくれますので、ソースコードの変更なしにCSPに合致したソースコードを生成することが可能なのです。

$ vulcanize --csp -o build.html index.html

Google Chromeのフラグの変更なしにWeb MIDI APIの利用が可能になることで、Web Audio API、Web MIDI APIを使ったブラウザで作った電子楽器の使えるシーンがより拡大されることを期待しています。manifest.jsonとバックグランドで動作させるJavaScriptの2つのファイルを用意することで簡単に実現できますので、ぜひ試してみてください。

※4 オフラインでも利用可能：Webアプリは大きく分けて以下の2つの種類があります。

Hosted App: HTML、CSS、JavaScript等の全てのリソースファイルがWebサーバに保存されているWebアプリのことです。URLにアクセスしてアプリを起動する所謂従来からよく知られているWebアプリです。
Packaged App: Hosted Appとは違い、HTML、CSS、JavaScript等のリソースファイルがzip等で1つになっており、Webブラウザにインストールします。Webブラウザにインストールされたリソースから起動します。そのため、オフラインでも動作が可能になっています。Chrome Appsはこの方式のWebアプリです。

おわりに

いかがでしたでしょうか？Web Audio APIで用意されている発振機（Oscillator）は正弦波、ノコギリ波、矩形波、三角波の基本的な波形しかなく、それ単体では単調な音しか出なかったのが、少し波形処理をしてあげることで楽器らしい音にすることができたと思います。さらにはWebブラウザに鍵盤をつなげると、和音まで演奏できるようになってしまいました。

さて、自作で楽器が開発ができるのはWebブラウザが初めてでしょうか？いえ、そんなことはありません。Windows、Mac、Android、iOS等の所謂Nativeな環境でも開発することは可能でした。では、Webブラウザで開発できるようになった利点はなんでしょう。それは楽器を開発するということに対するハードルが一段と低くなったところです。WebアプリケーションはWeb標準言語で開発します。Web標準言語の開発はブラウザとテキストエディタで行います。ですのでコンピュータを買ってきたその日から開発が可能です。さらにご説明させていただいた通り、こんなにも簡単に楽器を開発することができるのです。

今までは難しそうなイメージがあった音楽を使ったアプリケーション。しかしWeb Audio APIを使うと音を作ることができます。またWeb MIDI APIを使うと外部のMIDIデバイスとの双方向の操作が可能です。開発するWebアプリケーションに音を鳴らす要素を追加してみる、または遊び心でMIDIデバイスからWebアプリケーションを操作してみる等、ほんの少しの遊び心があなたのWebアプリケーションをより面白くする可能性があります。これを機会にいろいろなとことで試してみてはいかがでしょうか？

セッションの資料と動画

2015年1月25日に行われたHTML5 Conference 2015の当日の資料と動画へのリンクです。こちらも合わせて御覧ください。

動画

スライド

Web Audio API, Web MIDI API – 2015 html5 conference from Kawai Ryoya