Flash ActionScriptでMP3を再生する方法
ここからは実際に、JavaScriptとFlashをどのように連携しているのかを解説します。
FlashでMP3を再生するにはSoundクラスを利用します。Flash ActionScriptで次のように記述します。
var snd:Sound = new Sound();// Soundクラスの生成 snd.onLoad = function() { // 読み込みが完了した時のイベント snd.start(); } snd.loadSound("bom.mp3"); // ファイルの読み込み
次にフリーのFlashコンパイラのMTASC用に書いてみます。MTASC（Motion-Twin ActionScript 2 Compiler）に関しては、『フリーのFlashコンパイラMTASCを使ってお絵かきツールを作る』で書いていますので参考にしてください。
MTASCは、次のようにソースファイルをActionScript 2のクラス形式で書くことになります。
class mp3test { static function main() { // メイン関数 var snd:Sound = new Sound(); snd.onLoad = function() { snd.start(); } snd.loadSound("bom.mp3"); } }
これを「mp3test.as」という名前で保存します。クラス名とファイル名は同じにする必要があります。コマンドラインから実行するには、次のように書きます。
mtasc -swf mp3test.swf -header 450:360:30 -version 8 -main mp3test.as
本稿で作成するプログラムでは、JavaScriptと連携する機能を使うために、Flash Player 8以降が必要になりますので、コンパイルする時に、MTASCのコンパイルオプションに「-version 8」とオプションを付けるようにしてください。
JavaScriptからFlashの関数を呼び出せるようにする
JavaScriptでMP3を再生するライブラリ「playmp3.js」の仕組みは次のとおりです。
- Webブラウザがページを表示
- 「swfobject.js」（Flash表示ライブラリ）の取り込み
- 「playmp3.js」の取り込み
- MP3を再生
playFile()を登録playFile()を呼び出すFlash側（関数の登録）の対応方法
まずは、Flash側で行う対応から書いてみます。
JavaScriptからFlashの関数を呼び出せるようにするには、Flash Player 8以降で使えるExternalInterfaceを利用します。以下は、playFile(url)という関数をJavaScriptから呼べるように登録する例です。
メイン関数の中でplaymp3simpleクラスを生成し、このクラスのメソッドplayFile()をJavaScriptから呼べるようにExternalInterface.addCallback()を使って登録します。
import flash.external.*; class playmp3simple { static function main () { // playmp3simpleクラスの生成 var instance:playmp3simple = new playmp3simple(); // JavaScriptから利用する関数を登録 ExternalInterface.addCallback("playFile", instance, instance.playFile); } // 登録するMP3再生関数 function playFile(url:String):Void { var snd:Sound = new Sound(); snd.onLoad = function() { snd.start(); } snd.loadSound(url); } }
メソッドの登録に使うaddCallback()関数は、次のように使います。
ExternalInterface.addCallback("メソッド名",インスタンス,メソッド)
メソッド名には、JavaScriptから使うメソッド名を指定します。そして、MTASCから関数を登録する場合、まず自身のクラスを生成し、そのインスタンスと、インスタンスのメソッドを引数に渡します。
Flash側の対応はExternalInterface.addCallback()で関数を登録するだけです。
JavaScript側（Flash関数の呼び出し）の対応方法
ここまでで、Flashの関数をJavaScriptへ出力できるようになりました。次に、JavaScript側でFlashの関数を呼び出してみます。JavaScript側では、はじめにFlashのオブジェクトを取得し、その中の関数を呼び出すようにします。
その前に、FlashをHTMLに貼り付けるコードを書いてみます。FlashをJavaScriptを利用して貼り付けるには、JavaScriptのライブラリである「swfobject.js」を利用すると簡単です。
<!-- swfobject.jsを取り込む -->
<script type="text/javascript" src="swfobject.js"></script>
<!-- Flashを書き込む先のdivタグを作成する -->
<div id="flashcontent"></div>
<!-- Flash用タグを書き込む -->
<script type="text/javascript">
var swf = new SWFObject("playmp3simple.swf","fid",1,1,8,"white");
swf.write("flashcontent");
「swfobject.js」では、上記のようにidをつけたdivタグと、SWFObjectを生成するコードを書くだけでFlashファイルを埋め込むコードを生成してくれます。
その際、SWFObjectの第2引数に、objectタグのid属性（embedタグのname属性）を指定するのですが、このidを利用してFlashのオブジェクトを取得できます。
<script type="text/javascript">
function getMovie(id) {
return (navigator.appName.indexOf("Microsoft") != -1) ?
window[id] : document[id];
}
var playmp3 = getMovie("fid");
</script>
<!--関数の呼び出し -->
<a href="javascript:playmp3.playFile('bom.mp3');">再生</a>
上記のようにFlashのオブジェクトを取得すると、Flash側でそのオブジェクトに登録した関数が使えるようになります。上のgetMovie()関数の中でブラウザ判定処理を行っていますが、ブラウザによってオブジェクトの取得方法が違うのでこのようにしています。
それから、Flashの関数を実行する時の注意ですが、当然ながら、Flashファイルが読み込まれてはじめて利用できるようになります。そのため、上記のように、リンクをクリックしたら関数を呼び出すなど、ちょっとした工夫が必要となります。
FlashからJavaScriptを呼び出す方法
逆に、FlashからJavaScriptの関数を呼び出すには、FlashのExternalInterfaceクラスのcall()メソッドを利用します。これは次のように使います。
ExternalInterface.call("JavaScript関数名", 引数..)
これを利用して、MP3のファイルが読み込みが終了したら、JavaScriptの関数を呼び出す関数を作ってみます。
以下は、URLにあるMP3ファイルを番号noに読み込む関数です。そして、ファイルの読み込みが完了したら、onLoadに指定したJavaScriptの関数を呼び出します（ここで任意の番号noというのは、生成したSoundクラスを配列変数に代入しておくだけのものです）。
class playmp3 { //～ // MP3ファイルを読み込む関数 function loadNo(url:String, no:Number, onLoad:String):Void { var snd:Sound = new Sound(); snd.onLoad = function (ok) { // JavaScript関数の呼び出し ExternalInterface.call(onLoad, ok, no); }; snd.loadSound(url); snd_ary[no] = snd; } //～ }
そして、呼び出し側のJavaScriptでは次のように書きます。
<script type="text/javascript"><!-- function loadSound() { // 関数の呼び出し playmp3.loadNo("bom.mp3", 3, "snd_onLoad"); } // コールバックされる関数 function snd_onLoad(ok, no) { if (ok) { alert(no+"番の読み込みが完了しました。"); } else { alert(no+"番は読めませんでした。"); } } --></script>
まとめ
本稿では、MP3を再生するJavaScriptのライブラリを作ってみました。
Flash Player 8以降では、ExternalInterfaceクラスが利用でき、JavaScriptからFlashの関数を呼び出したり、FlashからJavaScriptの関数を呼び出すのが簡単です。これを利用することで、Flashの機能をライブラリ化することが比較的簡単にできます。
今回利用した、無料のFlashコンパイラの「MTASC」や、Adobeが無料で公開している「Free Flex2 SDK」などを利用することで、やる気さえあれば、誰でも無料でFlashファイルが作成できます。こうしたコンパイラを利用したFlash開発では、Javaのプログラムを作るのと近い感覚で開発を行うことができます。
今までFlashはちょっと…と敬遠していた方も、必要な機能だけを、ささっとライブラリにまとめてしまい、JavaScriptから利用してみるのもよいのではないでしょうか。
