JavaScript で MIDI を解析して鍵盤と共にサウンドデータを可視化する Euphony がすごい!
動的に MIDI を解析してデモを動かす
今回ご紹介するのは、JavaScript の実装例として非常に面白く興味深い、MIDI と WebGL の合せ技で実装されているデモ作品です。
作った方はどうやら Google の中の人みたいで、ちょっとそっけないようなシンプルなデザインとかが、妙にカッコよく板についている感じがしますね。
しかし結構実装の方は硬派というか、かなりよくできていて、なんと MIDI ファイルのドラッグ・アンド・ドロップによる、ローカルファイルの再生までできるみたいですね。
これはすごい!
MIDI シーケンサのような外見を 3D で
今回の作品は、正直に書いてしまえば、WebGL の実装としては、技術的に特殊なことは特に何もありません。
ほぼ全てのオブジェクトがキューブで描かれているシーン構成で、せいぜい、ちょっとだけ演出用にスプライトが使われているくらいのかなりシンプルな 3DCG 実装です。
しかし、今回のような MIDI ファイルを利用した WebGL の実装例というのは個人的には見たことがなくて、その発想も去ることながら、あえてシンプルに直球勝負で実装しているあたりに、カッコよさを感じました。
シーンの外見としては、いわゆる MIDI シーケンサのような感じに、入力された MIDI の打ち込みデータが立体的に表示されます。
デフォルトの状態で用意されている MIDI データの量がとんでもなく多いというのも、今回のデモの特筆すべき点と言っていいでしょう。
画面の左側にはスクロールするリストのようなものが出ているのですが、ここからは実に 200 曲以上の MIDI 音源を視聴できます! すごい!
私はあまり音楽編集や音楽データの形式などに詳しくないので、もしかすると勘違いしてるかもしれせんが、デモの外見のとおりでピアノベースの音の再生しかできないのかもしれません。それでも、この曲数はすごいですよね。
デモのページからもリンクされている Github のリポジトリで、readme を見てみると MIDI.js という JavaScript のライブラリが使われているようです。
恐らく、これを使って動的に MIDI ファイルを解析して、それによってこの上から落ちてくるバーなどを生成しているのだと思います。
ですから、たとえば左側にある曲名のリストなどを選択して、再生する曲を変更すると、一瞬待ち時間があるんですね。この待ち時間で、たぶん曲の解析などをその場で行っているのだと思います。このようなリアルタイム性を実現したことで、ドラッグ・アンド・ドロップによるローカルファイルの読み込みも行えるのでしょうね。
素晴らしいですね。
見上げてみたらめっちゃ降ってきてた!
外見はとてもシンプル。
しかし中身は結構骨太な感じで、見ていてとても楽しいですね。
MIDI の入力データはバーで表示されますが、長いバーもあれば、短いバーもあり、それらの長さに応じて鍵盤がどの程度の時間沈み込むかなども変化するようです。結構細かいところまで、ちゃんと作ってあるなって思いました。
よーく冷静になって見てみれば、ほんとに、キューブのモデルとスプライト用の板ポリくらいしか使ってないんですよね。それでこれだけ楽しい表現ができるというのは、個人的には新鮮な驚きでした。
技術的には WebGL だけでなくオーディオ系の技術が非常に興味深い一作となっています。
ぜひチェックしてみてください。