特集記事

JavaScriptでMP3を再生するライブラリの作り方

フリーのFlashコンパイラMTASCでJavaScriptの可能性を広げるライブラリの作成

更新日: 2007/02/27
公開日: 2007/02/26

ポスト

JavaScriptでMP3を再生するライブラリ「playmp3.js」の作り方を解説します。MP3を再生するためにFlashの機能を利用します。また、JavaScriptからFlashの関数を呼び出す方法など、JavaScriptとFlashの連携方法も紹介します。Flashファイルの作成には、フリーのFlashコンパイラMTASCを利用しますので、Flashを持ってない人でも応用ライブラリを作成できるでしょう。Flashと連携することでJavaScriptの可能性を広げます。

ポスト

はじめに

　JavaScriptでMP3を再生するライブラリ「playmp3.js」の作り方を解説します。MP3の再生にはFlashの機能を利用し、JavaScriptからFlashの関数を呼び出すなど、JavaScriptとFlashの連携方法も併せて紹介します。

　Flashファイルの作成には、フリーのFlashコンパイラMTASCを利用しますので、Flashを持ってない人でも応用ライブラリを作成できるでしょう。Flashと連携することでJavaScriptの可能性が広がります。

　以下のサイトで、MP3再生のサンプルを試せます。

JavaScriptでMP3再生するサンプル

対象読者

JavaScriptで効果音やBGMを鳴らしてみたい人
JavaScriptとFlashを組み合わせて面白いことをやってみたい人

必要な環境

FirefoxまたはIE 6以降
フリーのFlashコンパイラ MTASC 1.11

JavaScript MP3ライブラリの概要

　JavaScriptで作ったゲームや、ちょっとしたツールやアクセサリに効果音をつけたい場合があります。また、任意のタイミングでBGMを鳴らしたいこともあります。

　JavaScriptには、MP3を演奏する機能はついていません。しかし、Flashの機能を使うことでMP3を手軽に演奏できるようになります。

　本稿では、JavaScriptから手軽にMP3を演奏できるようなライブラリを作ります。このライブラリを使うと、次のような数行のコードを書くだけで、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中に記述します。

簡易MP3の再生サンプル

<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(番号)」と書きます。この番号は任意の番号を利用することができます。

MP3事前読み込みのサンプル

<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」を使いました）。

MP3事前読み込みのサンプル改良

<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(番号,オフセット位置,繰り返し回数)」と引数を付けて再生することができます。

JavaScriptの可能性を広げる方法

　今回のようにJavaScriptだけでは不可能なことを、JavaScript以外と組み合わせて可能にする方法はいくつか考えられます。

Flashを使って拡張する
QuickTimeプラグインを使って拡張する
サーバーCGIと通信して拡張する
Web APIを使って拡張する

　Flashを使う方法では、今回のようにMP3を再生したり、データをローカルに保存したり、ビデオカメラを監視したり…と、JavaScriptではできない機能を実現できます。
　そして、マルチメディア関係の再生では、QuickTimeのプラグインを使うのも手です。特にFlashでは、音楽ファイルのうちMIDIファイルを再生できないので、MIDIファイルが再生したいときはQuickTimeを使うと良いでしょう。また、多くの動画・音声に対応している点も見逃せません。
　また、サーバーに設置したCGIと通信したり、最近流行のWeb APIを使って、JavaScriptでできないことを実現するのもよいでしょう。

次のページ
Flash ActionScriptでMP3を再生する方法

この記事は参考になりましたか？

印刷用を表示

ポスト

特集記事連載記事一覧: 開発者のための「WWDC 2024」関連発表まとめ

LeSSやSAFeなど、大規模アジャイルにおけるソフトウェア品質の課題とは？

【オンライン技術書読書会のはじめかた】完璧じゃなくていい、雑談の延長線で開催してみませんか...

もっと読む

この記事の著者: クジラ飛行机（クジラヒコウヅクエ）

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事