ここでは手短に説明します。Polymer本体、今回利用するx-webmidiをそれぞれダウンロードします。Polymerx-webmidi開発するディレクトリを作成して、ダウンロードした2つのファイルを解凍し、以下の構成になるように配置してください。その後、同一ディレクトリにindex.htmlを作成します。以上で環境整備は完了です。実際に実際に開発を行っていきましょう。コード全体はこちらになります。それでは順に説明していきます。ElementをImport5行目:x-webmidiをアクティベートx-webmidiの属性は以下の通りです。メッセージは使わないので、inputとoutputのみを記述します。7行目:wm-webmidilinkをアクティベート8行目:wm-pckeyboardをアクティベート以上で準備は完了です。次にMIDIデバイスのリスト表示を行います。autoreselect></x-webmidioutput><br>x-webmidiinputとx-webmidioutputの属性は以下の通りです。input側はpckeyboard(wm-pckeyboardタグのID名)、output側はwmlink(wm-webmidilinkタグのID名)をそれぞれ指定しています。最後に入力されたMIDIメッセージを表示する場所を作ります。style="margin:30px;"></div>Inputから受け取ったMIDIメッセージを中継するためのJavaScriptを記述していきます。InputからのメッセージはEventとして飛んできますので、EventListenerをつける。タグで指定したIDになる。event.detail.data。6行目:「MIDIメッセージを表示する場所」の表示を新しいメッセージから順に並べるのと同時に表示する行数を絞る7行目:MIDIメッセージを「MIDIメッセージを表示する場所」に表示8〜10行目:Outputデバイスが選択されていたら、選択されているデバイスに対してInputから入力されたMIDIメッセージを送信。これで、InputからOutputにMIDIメッセージを中継することができました。File)の再生です。SMFはMIDIメッセージ1つ1つに時間情報を付加して、規定のフォーマットにまとめたバイナリファイルです。ここで付加された時間通りにMIDIメッセージを音源モジュールに送ることで、自動演奏ができる仕組みになっています。SMFをWebブラウザ上で再生するには、SMFのバイナリを読み解いて(パース)、付加されている時間通りにMIDIメッセージを音源モジュールに送信する、という手順になります。このバイナリファイルをパースするためにはSMFのフォーマットを勉強しないといけません。この問題を解決するべく、SMFのバイナリをパースする部分を、「wm-smfplayer」というPolymerのElementにしてみました。このElemetでSMFを再生するアプリを作ってみます。コード全体はこちらになります。それでは順に説明していきます。sysex></x-webmidirequestaccess>1〜3行目:「InputからOutputにMIDIメッセージを中継するアプリ」と同じ4行目:SMFをパースするElementを読み込む。Exclusiveが入っている場合があるので属性を書いています。タグを記述しています。wm-smfplayerの属性は以下の通りです。MIDIメッセージをバッファする時間Latencyを指定してMIDIメッセージをバッファリングすることで、より時間に正確な再生が可能になります。Outputデバイスのリスト表示、SMFの再生制御のためのボタンを追加します。Outputデバイスに送信するためのJavaScriptを記述していきます。output=document.getElementById("midi-output").getOutputDevice();smfPlayer.allSoundOff();});各行での処理の内容は以下の通りです。以上で、実装完了です。APIをPolymerのElementにしたx-webmidiを使用して、2つのアプリケーションを作りました。第一回目と比べるとコードの量が減るとともに、その多くがJavaScriptによる手続き型の実装ではなく、HTMLによる宣言型の実装になりました。宣言型で書くことで見通しがよく、手軽に実装できるようになります。ここで「手軽になった」ということは、「アイデアを具現化するまでの道のりが短くなった」ということを示していて、実際に開発を行う際は、考えついたアイデアの実現のみに集中してすることができるようになります。Interfaceの略称ではありますが、文字通りの音楽という枠を超えて別の分野でも利用可能、という実例をご紹介しようと思います。