はじめに
本稿では、簡単なマクロ(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で行っています。
ちょっと複雑なので、次のように機能の切り分けを図に描いてみました。
![技術の切り分けと開発分担 技術の切り分けと開発分担](http://cz-cdn.shoeisha.jp/static/images/article/703/01.gif)
なぜこのような構成になったか?
この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は楽譜をアルファベットと記号で表記するための言語です。例えば、
![楽譜 楽譜](http://cz-cdn.shoeisha.jp/static/images/article/703/zu1.gif)
上記楽譜のMMLは
rcde|fgab|
に対応します。
かつては、PCに搭載された音源カードから楽曲を再生するのに使用されていましたが、PCの性能が向上するにつれて、作曲ソフトは楽譜やピアノロールのようなグラフィカルなものに置き換わっていき、現在ではMMLはあまり使われなくなってきているのが実情です。しかし、MMLはいまだ根強く残っており、特定のソフトウェアシンセサイザーの再生専用であったり、MIDIを生成できたりします。JSSはMIDIファイルを生成します。
MIDIファイルとは
MIDIは楽器を制御するための通信プロトコルです。大きくショートメッセージとロングメッセージに区別されます。ショートメッセージは比較的頻繁に使用されるメッセージが割り当ててあり、長くても3バイトで「ドを弾く(ノートオン)」「レを離す(ノートオフ)」、あるいは「楽器をギターに変更」などといったものがあります。
ロングメッセージは、主として最初に一度送るだけで済むようなメッセージが割り当ててあり、「規格に従って楽器をリセット」や、「イコライザのゲインを-1に設定」などのようなものがあります。これらのメッセージは、楽器とシーケンサ(キーボードやMIDIプレイヤー)間でリアルタイムにやり取りされます。
MIDIファイルは、一般にSMF(Standard MIDI File)というフォーマットとして「.mid」拡張子のファイルで知られています。SMFはヘッダチャンクと複数のトラックチャンクから構成され、トラックチャンク内に複数のMIDIメッセージが時間情報つきで時間順に並んだ構成となっています。その概略図を以下に示します。
![SMF概略図 SMF概略図](http://cz-cdn.shoeisha.jp/static/images/article/703/02.gif)
JSSの最終出力はSMFのバイト列となります。
JSSの使い方
プログラム本体は「jss.js」です。MML文字列を入力し、MML文字列をMIDIファイルのバイト列に変換したのち、CGIへ渡す仕組みになっています。すなわち、JSSだけでは音楽が鳴ることはなく、MIDIファイル化とリンクを生成するCGIの手助けが必要となります。今回のオルゴールの場合、機能ブロック上、次のような役割になります。
![音楽を鳴らす仕組み概略 音楽を鳴らす仕組み概略](http://cz-cdn.shoeisha.jp/static/images/article/703/03.gif)
「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を指定