FlashからMIDIを鳴らす方法 簡易説明

 Flashからmidiを鳴らす方法について、意外と需要があるようなので、その方法について書いてみました。
 ActionScript、JavaScript、JScript、VBScriptを利用します。特にASとJavaScriptの知識が必要になります。この二つが分かっているなら、残り二つは多分なんとかできると思います(笑)。

 とは言え、詳細に解説している余裕が無いので、ここでは大まかな説明しかできません。ご容赦下さい。あくまで方針やヒントを書いたものだとお考え下さい。
 個々の詳細なスクリプトの書き方は、リンク先を参照したり検索して探して見て下さい。
 またFlashソフトが古いため、AS2.0の内容になっています。ご注意下さい。

 ここで解説するのは、パソコンのFlash Playerからmidiを鳴らす方法です。
 携帯版FlashPlayerについては取り扱いません。再検索をどうぞ。

 ちょっとしたコツや私がはまったポイントを「技術メモ」として切り出してあります。決して分かりやすくはないメモですが、参考になるかも知れません。
 ちなみに、実際に製作したものはこちらです。

 尚、内容は全て無保証です。
 ご利用は自己責任でお願いします。


1.できるならmp3を使いましょう

 Flashからmidiを鳴らすことはできますが、以下の理由でお勧めしません。

  • 鳴らせる環境が限定的。特にVistaの半分のユーザーで動きません。このため、Flash Playerは正常に動くのに音がならない事があります。
  • midiは不安定で、音が飛んだり音色が捻じ曲がったりすることがあります。
 実際のところ、midiをmp3に変換して、そのmp3をFlash Playerで鳴らす方がお勧めです。遥かに手間が少なく、幅広い環境でBGMを流すことができます。
 音素材の作者がmp3への変換を禁止しているとか、曲数が多すぎてmp3ではロードに5分かかってしまうとか、そういう場合のみmidiを鳴らす方法を検討すべきでしょう。

 尚、midiをmp3に変換するには、まずmidiをwaveに変換(録音)し、そのwaveをmp3に変換します。
 方法は以下のサイトをご覧下さい。
  MIDI→WAVE
  WAVE→MP3


2.基本方針

 と言う訳で、不幸にしてどうしてもFlashからmidiを鳴らす必要がある方のために、続きを書きます。

 (携帯版を除いて)Flashは直接midiを操作することはできません。しかし、JavaScriptを呼び出すことができます。
 JavaScriptも直接midiを鳴らすことはできませんが、BGMを鳴らすためにウェブブラウザが利用するPlug-inを操作することができます。例えばFireFoxならばQuickTime Plug-in(QT)を利用できます。
 ほとんどのBGM用のPlug-inはmidiを鳴らせます。
 つまり、Flash → JavaScript → Plug-inという流れでコマンドを渡して、間接的にFlashからmidiの演奏の操作をする訳です。

 Plug-in(プラグイン)の意味が良く分からない人は、検索して下さい。
 それが分かっていないと、この先は全く意味不明だと思います(苦笑)。

 BGM用のPlug-inにはいくつもの種類があります。

  • Windows Media Player(WMP)
  • Quick Time (QT)
  • Real Player
  • Win Amp
 …など。

 厄介なのは、音楽を再生するプラグインは、プラグインごとに操作するためのコマンドが異なる事です。
 そして同じプラグインでも、OSが異なると挙動が違う事があります。ブラウザが違うと対応していない事もあります。
 さらにWindows Media Playerのようにバージョンによって扱い方が異なるものすらあります。
 WindowsMediaPlayerとQuickTimeとRealPlayerとWinAmpなどなどのプラグインと主要なバージョンと、Win2000とXPとVISTAとMacOSXなどなどと、InternetExplorerとFireFoxとOperaとsafariとChromeなどなど(Sleipnirも確認しておく?)の組み合わせの全てに対応するのは、非現実的です。
 何をどこまで対応するのか、少し考える必要があります。

 参考:2007年9月時点での各プラグインの普及率

 また以下の表は、私が確認できた範囲の動作状況です。

  WMP ver11  QT ver7.6 
IE 7.0 (XP) ○  ○ ※1 
IE 7.0 (Vista) × ※2  ○ ※1 
Fx 3.0 × ※3   ○ 
Opera 9.6 ×  × 

※1…BGM再生は問題ありませんが、プラグインの画面表示がおかしいです
※2…音量がセットできません(曲の再生などはできます)
※3…プラグインを追加しても、midiやmp3は再生できません

 そしてそもそも、スクリプトの動作をブロックするアドオン、プラグインを導入しているユーザーもいます。その場合、ブロックを解除してもらわなければBGMは流れません。

 私は、WMPとQTにのみ対応することとし、他のプラグインの場合(もしくはスクリプトから操作できない環境だった場合)はFlash Playerからmp3を流すことにしました。(midiとmp3両方のファイルを用意するのが手間ですが、大半の人のロード時間が減るのは魅力的だったので)

 ところで、Internet Explorerの場合、Windows Media Player Plug-in(WMP)を利用できますが、WMPそのものはJavaScriptの操作を受け付けないようです。
 変わりにJScriptで操作できます。ですので、JavaScriptからJScriptを呼び出し、そのJScriptで操作することになります。
 少し面倒ですが、普及率を考えるとWMPを切ることは考えにくいですね(もっとも今回の場合、JavaScriptとの違いを意識しなくてはならない場面は少ないと思います)。

 尚、ブラウザのPlug-inと、独立してインストールされているBGM再生ソフトは、名前が一緒でも別のプログラムとしてインストールされている場合があります。まあ、Flash Playerがそもそもそうなんですが(笑)。
 ここでは特に断りが無い場合、全てPlug-inを差します。ご注意下さい。


3.ブラウザ・OS・プラグインの判別

 すでに書いて来た通り、全ての環境で全てのプラグインが等しく動作する訳ではありません。
 従って、環境ごとに場合分けを行い、それぞれに適した方法でmidiを再生する必要があります。
 ですので、まずはブラウザの判別、OSの判別、プラグインの判別から始めることにしましょう。
 これらの判別は、JavaScriptのnavigatorオブジェクトを用います。
 ただし、ご存知のようにIEではnavigatorオブジェクトの一部が上手く動きません。
 このため、VBScriptを併用すると良いようです。

  QTの検出

 英語のサイトですが、めげないで下さい(笑)。英語本文よりコードを読んだ方が抵抗が少ない人もいるかも知れませんね。
 このQTの検出を土台として、WMPの検出のスクリプトも書くと良いと思います。
 ただひょっとすると、WMPを検出するVBScriptのSet Objectの行は

  Set ObjectWMP = CreateObject("WMPlayer.OCX")

 だけで良かったかも知れません(何故こうしたのかは今となってはもう覚えていません・苦笑)。
 JavaScript、VBScriptが混ざるので、一見すると書き分けが面倒そうです。
 リンク先のコードを読めば分かりますが、一度JavaScriptで変数などを宣言しておいて、VBScriptの検出結果をJavaScriptで宣言した変数にセットしても動作します。そういう形で書いて行くのが良いようです。

 navigatorオブジェクトについてはここでは詳しく述べません。参考書を見るなり検索するなりして下さい。
 OSの検出もnavigator.userAgentで取得した文字列をmatchするなどして行えば良いでしょう。(良く分からなければ検索して下さい。きちんと解説しているサイトがあるはずです)
 とにかく、これでブラウザ・OS・プラグインの判別と場合分けができるはずです。


4.プラグインを書き出す

 次は、BGMを演奏するプラグインの呼び出し(書き出し)です。
 「3.ブラウザ・OS・プラグインの判別」の場合分け結果を受けて、必要なプラグインを書き出す事になります。
 最も簡単なのは、ページが開かれると同時に(判別を行い)プラグインを書き出してしまうことです。
 BGMを鳴らすためのHTMLタグを、document.write( )で書き出す形が良いでしょう。次のサイトが参考になります。

  音楽 (BGM) 用 JavaScript (BGMが鳴ります)

 関数にして実行すると上手く動かない事があるのが、イヤラシイところです(どうしても関数化する必要があるのならば、innerHTMLを使うと安定して動作するようです)。

 以下に、各プラグインをHTMLへ貼り付ける時のタグの書き方が掲載されています。これを上記のdocument.write( )で書き出す形に変形します。IEの場合、bgsoundタグを使うと恐らくプラグインをスクリプトから操作する事ができませんので、objectタグを使用します。
 この辺は通常のObjectの埋め込みとだいたい一緒だと思いますので、日本語のJavaScript解説サイトの方が分かり易いかも知れません。

 ウェブブラウザによって書き方が変わる点に注意して下さい(FireFoxはembedタグが必要になります)。
 尚、WMPはバージョン7と6.4の場合が載っていますが、ver7以降はどれも同じスクリプトで操作できます。
 ちなみにこの文書執筆時点(2009年6月)の最新版はver11です。流石にver6.4などと言う5世代前の古いバージョンを使い続けている人は、ごく少数派であると信じたいところです(でも未だにNetScapeを使い続けている人とか、win98でIE6を使っている人の中には、ver6.4以前の人がいるとは思います)。

 FlashからBGMを操作する訳ですから、多くの場合、最終的にプラグインのコントローラーは見えなくしてしまうと思います。
 ただ動作確認のため、製作中は見えるようにしておいた方が良いでしょう。


5.Flashから呼び出す

 続いて、FlashとJavaScriptの通信を行う部分を作ります。
 Flashでイベントに割り当ててある関数が、JavaScriptと連動するスクリプト(関数)を実行し、JavaScriptが実行される…という形になります。
 例えば「Play」ボタンが押されたら、ActionScriptでJavaScriptと連動する関数を実行し、JavaScriptの演奏用関数を呼び出したり、変数の形で「演奏命令」を渡したりします。(その先、実際に演奏する部分については後述します)

 AS2.0の場合、連携する方法はいくつかあります。
 ・ExternalInterfaceクラス
 ・getURL
 ・fscommand

 このうち、ExternalInterfaceが一番便利みたいです。
 ただ、Flash Player 8.0以上対応です。PolarBlueの開発環境は7.0で非対応です(汗)。ですので、実際には試していません。
 その他の二つは7.0以前に使われていた方法です。
 getURLは手軽ですが、IEではgetURLでJavaScriptを呼び出す度にmidiの演奏が停止するという問題点があります(ページ遷移と認識されているようです)。
 少し手間ですがfscommandが良いでしょう。ただしIEではfscommandでJavaScriptが呼び出せないようで、一回VBScriptをfscommandより呼び出し、VBScriptからJavaScriptを呼び出す必要があるようです。
 (ちなみに、FxでFireBugを利用していると、fscommandが上手く動かなくなるケースがあるようです)
 それぞれの具体的な方法は、リンク先を参照して下さい。

 ちなみに、fscommandもgetURLも、ローカルで実行しようとするとFlash Playerのセキュリティ機能でブロックされてしまいます。
 オンラインにアップすれば、同一ドメイン間(同じ階層?)でのやり取りであれば問題なく実行できます。


6.BGMを流すためのコマンド

 いよいよ実際に音を鳴らす方法です。
 ここは個々のプラグインによってスクリプトが異なることになります。
 前述のプラグイン判別結果に応じて、呼び出す関数を分ける形が良いのでしょう。

 個々のプラグインごとのコマンドは、プラグインの公式のサイトのどこかに書いてあるようです。探すのが大変ですけれどもね(苦笑)。

 WMPの場合、「プラグイン名.オブジェクト名.コマンド」と言う順番で記述します。
 (プラグイン名は「4.プラグインを書き出す」で書き出した時、IDなどに指定したものが入ります。オブジェクト名は下のリンク先を参照して下さい)

  例:my_player.controls.play();

 QTの場合、「document.プラグイン名.コマンド」という形になります。

  例:document.my_player.Play();

 具体的なコマンドやオブジェクトについては、次のサイトをご覧下さい。
 様々なコマンドがありますが、基本的には「曲(URL)のセット」「再生」「停止」「巻き戻し」「早送り」「音量セット」があれば最低限の用は足りると思います。
 慣れてきたら、再生速度を変化させたり、後ろから逆向きに再生させたりするのも楽しいでしょうね。

 これで、midiが鳴らせるようになるはずです。(mp3なんかも鳴らせますが)


7.最後に

 以上、かなり駆け足でしたが、FlashからMIDIを操作する方法を説明してみました。
 多分、これを読んだだけじゃ上手く作れないと思います(苦笑)。スミマセン。
 とにかくFlashからmidiを鳴らすのは(素人には)簡単ではないので、覚悟して取り組んで下さい。
 (逆にプロのajax使いの方は常識的にできてしまうのかも知れませんが)

 ライブラリでも提供できれば良かったのですが、かなり限定された用途に合わせてスクリプトを作ってしまっていたので、他の人がすぐに流用できるような代物になっていないんですね(汗)。
 それに手を入れるだけでも随分大変なので…こういう形でお茶を濁してしまいました。
 本当に余裕ができたら何か考えたいとも思うのですが、お約束は全くできません。

 それでも、あなたが上手くmidiを鳴らせることを祈っています。




Visual Replay Makingに戻る