HTML5の魅力。Webブラウザ上で楽譜を表示し、MIDIを使って奏でる「ABC.js」 // MOONGIFT Archived

ABC.jsはWeb上で楽譜を表示し、演奏するJavaScriptライブラリ。

ABC.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によってWeb上の表現力は高まっている。SVGでベクター画像を描いたり、WebGLによって3Dオブジェクトを描き出すこともできる。Canvasを使うプロジェクトも多い。

きれいな楽譜表示

これまではFlashを使ったり、画像を使わなければならなかった表現もHTMLだけでできるようになる。その一つ、楽譜を描き出して音まで鳴らせるのがABC.jsだ。

ABC.jsは特定の記法に沿って記述することでWebブラウザ上に楽譜を書くライブラリだ。JavaScriptを使っているので、その場で手直ししてレンダリングし直すこともできる。楽譜共有サイトのようなものを作ることさえできるだろう。

Firefoxなら演奏とダウンロードも

そして描いた楽譜からMIDIを生成し、音を鳴らすこともできる（QuickTimeの場合はライブラリが必要。Firefoxであればプラグイン不要）。もちろんdata URIで出力し、ダウンロードすることもできる。その音楽すら動的だ。これまでは面倒だった楽譜の公開も、ぐっと簡単なものになるだろう。

MOONGIFTはこう見る

画像で出力するだけでは単なるバイナリデータであって再利用性がとても低い。Flashを使う場合は恐らくXMLなどで楽譜データを出力し、それをFlashでレンダリングする形になるだろう。JavaScriptで操作することもAPI次第でできるが、柔軟とは言いがたい。

HTML5およびCanvasタグを使って描き出せれば、自由度は非常に高い。Webブラウザ上で音楽を作り、奏で、さらにそれをダウンロードできるというのはとても以前のWebでは考えられなかった。HTML5を知ることで新しいサービス開発のきっかけにもなるだろう。