はじめに
JavaScriptでMP3を再生するライブラリ「playmp3.js」の作り方を解説します。MP3の再生にはFlashの機能を利用し、JavaScriptからFlashの関数を呼び出すなど、JavaScriptとFlashの連携方法も併せて紹介します。
Flashファイルの作成には、フリーのFlashコンパイラMTASCを利用しますので、Flashを持ってない人でも応用ライブラリを作成できるでしょう。Flashと連携することでJavaScriptの可能性が広がります。
以下のサイトで、MP3再生のサンプルを試せます。
対象読者
- JavaScriptで効果音やBGMを鳴らしてみたい人
- JavaScriptとFlashを組み合わせて面白いことをやってみたい人
必要な環境
- FirefoxまたはIE 6以降
- フリーのFlashコンパイラ MTASC 1.11
JavaScript MP3ライブラリの概要
JavaScriptで作ったゲームや、ちょっとしたツールやアクセサリに効果音をつけたい場合があります。また、任意のタイミングでBGMを鳴らしたいこともあります。
JavaScriptには、MP3を演奏する機能はついていません。しかし、Flashの機能を使うことでMP3を手軽に演奏できるようになります。
本稿では、JavaScriptから手軽にMP3を演奏できるようなライブラリを作ります。このライブラリを使うと、次のような数行のコードを書くだけで、MP3が再生できるようになります。
<!-- ライブラリのインクルード --> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="playmp3.js"></script> <!-- クリックでMP3再生 --> <a href="javascript:playmp3.playFile('bom.mp3')">爆発音</a>
また、MP3の再生にはFlashの機能を使いますが、AdobeのFlash 8を持っていなくても大丈夫です。今回は、フリーのFlashコンパイラのMTASCを使用してFlash部分を作ります（むしろ、数行のActionScriptを書くために、Flashを起動してコンパイルするのは手間がかかりますので、こんな時はMTASCが便利です）。
ライブラリの使い方
はじめに、ライブラリの使い方を紹介します。ライブラリを利用するには、本稿からダウンロードできるソースファイルに梱包されている3つのファイル（swfobject.js、playmp3.js、playmp3.swf）が必要です。
そして、再生したいMP3ファイル名が「bom.mp3」の時、次のようなプログラムをHTML中に記述します。
<html> <body> <!-- ライブラリのインクルード --> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="playmp3.js"></script> <!-- クリックでMP3再生 --> <a href="javascript:playmp3.playFile('bom.mp3')">爆発音</a> </body> </html>
ここで使用上の注意なのですが、サーバーにアップせず手元のパソコン（ローカルPC）で試した場合、Flashのセキュリティ制限のせいでMP3が再生されない場合があります。
この場合の対処方法は2つあります。1つは、適当なFlashファイルを表示して右クリックし、［設定...］を選択します。プライバシーの［高度な設定］から［グローバルセキュリティ設定］パネルで、［これらのファイルとフォルダを常に信頼する］のリストにテストするフォルダを追加します。
もう1つは、サーバーにアップロードして試す方法です。localhostでも問題ないので、ApacheやIISなどのHTTPサーバーを利用すればスムーズにテストできます。
ライブラリのセットアップ
「swfobject.js」と「playmp3.js」を取り込むとライブラリのセットアップは自動で行われます。そのため、後は再生したい場面で「playmp3.playFile('ファイル名')」のように書くと、MP3ファイルを再生できます。
MP3ファイルを事前にロードしておく方法
上で紹介した「playmp3.playFile('ファイル名')」は、毎回MP3ファイルをダウンロードして再生することになります。ですので、小さな効果音などは問題ないのですが、ある程度大きなファイルを再生したいときは不便です。
そこで、事前にファイルをロードしておき、任意のタイミングで再生を行うようにする方法もあります。この場合、あらかじめ「swfobject.js」と「playmp3.js」を取り込んでおき、bodyタグのonLoadイベントで音楽ファイルの読み込みを行うようにします。
ファイルを読み込むには「playmp3.loadNo("ファイル名", 番号);」と書きます。そして、再生するときは「playmp3.playNo(番号)」と書きます。この番号は任意の番号を利用することができます。
<html> <body onLoad="loadMySound()"> <!-- ライブラリ取り込み --> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="playmp3.js"></script> <!-- サウンドのロード --> <script type="text/javascript"><!-- function loadMySound() { playmp3.loadNo("bom.mp3", 0); playmp3.loadNo("pi.mp3", 1); } --></script> <!-- 再生 --> <a href="javascript:playmp3.playNo(0);">爆発！</a> <a href="javascript:playmp3.playNo(1);">クリック音</a> </body> </html>
MP3ファイルのロードを行うタイミングですが、ライブラリ取り込み直後だと関数がまだ利用できる状態になっていないので、必ずbodyタグのonLoadやその他のイベント内でロードするようにします。
また、MP3ファイルがロードされないうちにクリックしても音が鳴りません。そこで、音声ファイルがロードされた後に再生用のリンクを表示するようなJavaScriptを書いてみます。
このためには、「playmp3.loadNo("ファイル名",番号,"JavaScript関数名")」のように、3番目の引数に、ファイルのロードが完了した時に実行するJavaScriptの関数名を書いておきます（リンクの表示／非表示の切り替えには、JavaScriptのライブラリ「prototype.js」を使いました）。
<html> <body onLoad="loadMySound()"> <!-- ライブラリ取り込み --> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="playmp3.js"></script> <script type="text/javascript" src="prototype.js"></script> <!-- サウンドのロード --> <script type="text/javascript"><!-- function loadMySound() { Element.hide("playlink"); playmp3.loadNo("bom.mp3", 0, "onLoad"); } function onLoad(ok, no) { Element.show("playlink"); } --></script> <!-- 再生 --> <div id="playlink"> <a href="javascript:playmp3.playNo(0);">爆発！</a> </div> </body> </html>
音量や定位（パン）を指定する方法
「playmp3.loadNo("ファイル名", 番号)」を使う方法では、番号を指定して、音量や定位（パン）を指定することができます。音量の設定には「playmp3.setVolumeNo(番号,音量)」を使います。音量には、0から100までを指定できます。定位は「playmp3.setPanNo(番号,定位値)」で、定位値には-100から100までの値を指定できます。
<script type="text/javascript"><!-- function loadMySound() { playmp3.loadNo("bom.mp3", 0); playmp3.setVolumeNo(0, 80); playmp3.setPanNo(0, 80); } --></script>
その他の機能
その他、再生を止めたいときには「playmp3.stopNo(番号)」を使います。また、繰り返し再生を行いたい場合には、「playmp3.playNo(番号,オフセット位置,繰り返し回数)」と引数を付けて再生することができます。
- Flashを使って拡張する
- QuickTimeプラグインを使って拡張する
- サーバーCGIと通信して拡張する
- Web APIを使って拡張する
そして、マルチメディア関係の再生では、QuickTimeのプラグインを使うのも手です。特にFlashでは、音楽ファイルのうちMIDIファイルを再生できないので、MIDIファイルが再生したいときはQuickTimeを使うと良いでしょう。また、多くの動画・音声に対応している点も見逃せません。
また、サーバーに設置したCGIと通信したり、最近流行のWeb APIを使って、JavaScriptでできないことを実現するのもよいでしょう。
