はじめに
本稿では、簡単なマクロ（MML）でMIDIファイルを生成する「JavaScriptSakura」を利用したWebオルゴールを作成します。オルゴールの本体はFlashで作成し、MIDIファイルの作成に「JavaScriptSakura」を利用しました。また、せっかくのWebオルゴールなので、簡単な掲示板の機能も持たせてみようと思います。
本稿は、クジラ飛行机と「JavaScriptSakura」の作者であるadasの共著です。
対象読者
- Webアプリケーションの作成に興味がある人
- ある程度、HTML/JavaScript/Flashが読める人
- Web上でMIDIプログラミングをしてみたい人
- 簡単なマクロ言語を作ってみたい人
必要な環境
マクロ（MML）でMIDIを生成するJavaScriptライブラリ「JavaScriptSakura」を利用するのに必要な環境
- ApacheなどのWebサーバー
- Ruby、またはPHP4
Flashでオルゴールを作成するのに必要な環境
- Flash 8
今回作成するWebオルゴールの概要
Webブラウザで動くオルゴール製作ソフトを作ります。ただのオルゴールだと面白くないので、簡単な曲掲示板も作り、作った曲を保存できるようにしてみます。
実際に動いているWebオルゴールは、以下のWebページにありますので、試しに曲を入力して遊んでみてください。
本稿で解説するのは主に以下の3つです。
- MIDI生成ライブラリ JavaScriptSakura（JSS）に関して
- Flash製オルゴールに関して
- 掲示板に関して
ここ最近、筆者の周囲ではプログラマー同士で集まって、一緒に開発を行う開発合宿が流行しています。このWebオルゴールも、1日開発合宿と題して、ある日曜日にクジラ飛行机とadasが集まって、一緒に開発したWebアプリケーションです。
技術の切り分けと開発分担
Webオルゴールの作成にあたって、クライアント側の開発にJavaScript/Flash、サーバー側の開発にRuby/PHPと、4つの言語を使い分けています。
オルゴールは、Flashで作成し、Flashで作成したオルゴールのデータをJavaScriptのライブラリによって、MIDIファイルに変換します。変換したMIDIファイルは、そのままでは演奏することができませんので、一度、サーバーへ保存しています（サーバーへの保存にはPHPを利用しています）。そして、オルゴールで作った曲データを保存するための、曲掲示板の作成をRubyで行っています。
ちょっと複雑なので、次のように機能の切り分けを図に描いてみました。
なぜこのような構成になったか？
このWebオルゴールを作るにあたって、もともと、adasがJavaScriptでMIDIファイルを生成するライブラリ「JavaScriptSakura」を作っていました。
1日開発合宿のはじめに、Webオルゴールの構成図を書きました。そして、大きく分けて、オルゴール本体（クライアント側）の作成と、掲示板の作成（サーバー側）の、2つの作業に分けることができました。そして、クジラ飛行机がオルゴール本体を、adasがサーバー側を担当しました。
JavaScriptSakura
はじめに
JavaScriptSakura（以下、JSS）は、MML（Music Macro Language）をMIDI（Musical Instrument Digital Interface）ファイルへ変換するソフトウェアです。名前の通りJavaScriptで記述されています。
本稿の著者製作の「テキスト音楽サクラ」というMMLコンパイラの文法の一部を再現します。JavaScriptはバイナリファイルを取り扱うことができないので、変換したMIDIファイルのバイト列を一度CGIに渡してサーバー側でバイナリ化した後で、リンクを返すなどしてMIDIファイルを生成します。
MMLとは
MMLは楽譜をアルファベットと記号で表記するための言語です。例えば、
上記楽譜のMMLは
rcde|fgab|
に対応します。
かつては、PCに搭載された音源カードから楽曲を再生するのに使用されていましたが、PCの性能が向上するにつれて、作曲ソフトは楽譜やピアノロールのようなグラフィカルなものに置き換わっていき、現在ではMMLはあまり使われなくなってきているのが実情です。しかし、MMLはいまだ根強く残っており、特定のソフトウェアシンセサイザーの再生専用であったり、MIDIを生成できたりします。JSSはMIDIファイルを生成します。
MIDIファイルとは
MIDIは楽器を制御するための通信プロトコルです。大きくショートメッセージとロングメッセージに区別されます。ショートメッセージは比較的頻繁に使用されるメッセージが割り当ててあり、長くても3バイトで「ドを弾く（ノートオン）」「レを離す（ノートオフ）」、あるいは「楽器をギターに変更」などといったものがあります。
ロングメッセージは、主として最初に一度送るだけで済むようなメッセージが割り当ててあり、「規格に従って楽器をリセット」や、「イコライザのゲインを-1に設定」などのようなものがあります。これらのメッセージは、楽器とシーケンサ（キーボードやMIDIプレイヤー）間でリアルタイムにやり取りされます。
MIDIファイルは、一般にSMF（Standard MIDI File）というフォーマットとして「.mid」拡張子のファイルで知られています。SMFはヘッダチャンクと複数のトラックチャンクから構成され、トラックチャンク内に複数のMIDIメッセージが時間情報つきで時間順に並んだ構成となっています。その概略図を以下に示します。
JSSの最終出力はSMFのバイト列となります。
JSSの使い方
プログラム本体は「jss.js」です。MML文字列を入力し、MML文字列をMIDIファイルのバイト列に変換したのち、CGIへ渡す仕組みになっています。すなわち、JSSだけでは音楽が鳴ることはなく、MIDIファイル化とリンクを生成するCGIの手助けが必要となります。今回のオルゴールの場合、機能ブロック上、次のような役割になります。
「jss.js」を読み込むと、JSSakura.setup、およびJSSakura.compileという関数が使用できるようになります。それぞれの引数は次のとおりです。
JSSakura.setup(呼び出すCGI, 結果表示のDIV ID); JSSakura.compile(MML文字列, コールバック関数);
<script type="text/javascript" src="jss.js"></script> // jss読み込み JSSakura.setup('./midi.php', 'player'); // CGIとしてmidi.phpを指定, 返り値をdiv id=playerへ JSSakura.compile("cdefgfedc",mmlPlayCallback); // "cdefgfedc"というMMLをコンパイル、CGIの結果を渡す // コールバック関数にmmlPlayCallbackを指定
