Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScriptとFlashによるWebオルゴールの製作

JavaScript MIDIライブラリ「JavaScriptSakura」を使う

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/11/24 00:00

本稿では、簡単なマクロ(MML)でMIDIファイルを生成する「JavaScriptSakura」を利用したWebオルゴールを作成します。オルゴールの本体は、Flashで作成し、MIDIファイルの作成に、「JavaScriptSakura」を利用しました。また、せっかくのWebオルゴールなので、簡単な掲示板の機能も持たせてみようと思います。

目次

はじめに

 本稿では、簡単なマクロ(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メッセージが時間情報つきで時間順に並んだ構成となっています。その概略図を以下に示します。

SMF概略図
SMF概略図

 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を指定

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • クジラ飛行机(クジラヒコウヅクエ)

    ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

  • adas(adas)

    趣味プログラマー。10年以上前にゲーム作りでプログラミングに目覚めて以来、ソフトウェアで実現できるものは何でも興味の対象に。住処はhttp://www.0and1.org/。

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5