MP3FLVPlayer ～ MP3 & FLV プレイヤー

この Wiki は、まだ、書き掛けのページです。

MP3FLVPlayer とは何ですか？

MP3FLVPlayer は、MP3 Player および FLV Player、さらにそれらを操作するためのいくつかのJavaScriptから構成されるライブラリです。

Flash を操作するためには、SWFObject 1.5 という有名な Flash 用の JavaScript ライブラリがあります。

ただし、非常に高機能であり、単純なことを行う場合でも、それなりの記述をしなければなりません。JavaScript を理解してるのであれば、この SWFObject を利用した方が良いのでしょうが、そうでなければ、敷居が若干高くなることも否めません。

そこで、SWFObject の代替となるスクリプトと専用のMP3プレイヤーおよびFLVプレイヤーに特化したライブラリを作成しました。

なお、本ライブラリで使用するプレイヤーは、Adobe Flex3 で作成したものです。

MP3FLVPlayer の実行環境

MP3FLVPlayer の中核は、Flash用swfファイルと JavaScript のライブラリです。つまり、JavaScript が動作し、Flashプレイヤーがインストールされているブラウザであれば、何でも良いのですが、実際には、制限を加えています。

すなわち、ブラウザチェックの部分で以下のブラウザを推奨し、それ以外は非推奨としています。

Windows : Internet Explorer 7 以上
Windows : Firefox 2 以上
Windows : Safari 3 以上
Windows : Opera 9 以上

Mac : Firefox 2 以上
Mac : Safari 2 以上
Mac : Opera 9 以上

また、Adobe Flash Player のバージョンは、9 以上でないと動作しません。

インストール

プロジェクトページの最新リリース情報から最新バージョンをダウンロードします。
ダウンロードしたファイル (ZIP形式) を適当なディレクトリに解凍します。解凍されたディレクトリ内には、以下のファイルがあります。

* browser.js (JavaScript ライブラリ)
* player.js (JavaScript ライブラリ)
* FLVPlayer.swf (FLV プレイヤー : swf形式)
* MP3Player_L.swf (MP3 プレイヤー : swf形式)
* sample.html (サンプル HTMLファイル)
* sample2.html (サンプル HTMLファイル)
* sample.flv (サンプル FLV ファイル)
* MySong.mp3 (サンプル MP3 ファイル)

以上で、インストールは終了です。実際に必要となるファイルは、2つの JavaScript ライブラリと 2つのswf形式プレイヤーだけです。それ以外はサンプルなどになります。

まずは使ってみよう

もっとも単純な方法

もっとも単純な使用方法の例は、以下の simple.html です。

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>Flex 3</title>
 <script type="text/javascript" src="browser.js"></script>
 <script type="text/javascript" src="player.js"></script>
 </head>
 <body>
 <p>
 <script type="text/javascript"><!--
 Flash.FLVPlayer("./", "sample.flv");
 Flash.MP3Player("./", "MySong.mp3");
 //-->
 </script>
 </p>
 </body>
 </html>

この例では、simple.html、browser.js、player.js、FLVPlayer.swf、MP3Player_L.swf、sample.flv、MySong.mp3 をすべて同じディレクトリに配置しています。

まず、JavaScript ライブラリ browser.js と player.js を組み込みます。このとき組込み順序がありますので、つぎの記述通りに組み込みを行います。

 <script type="text/javascript" src="browser.js"></script>
 <script type="text/javascript" src="player.js"></script>

実際のプレイヤーを呼び出している部分は、つぎの記述になります。

 <script type="text/javascript"><!--
 Flash.FLVPlayer("./", "sample.flv");
 Flash.MP3Player("./", "MySong.mp3");
 //-->
 </script>

FLV プレイヤーは、Flash.FLVPlayer メソッドを、MP3 プレイヤーは、Flash.MP3Player メソッドをそれぞれ呼び出します。各メソッドの書式は、つぎのようになります。

 Flash.FLVPlayer(
     "./",
     "sample.flv"
 );
 
 Flash.MP3Player(
     "./",
     "MySong.mp3"
 );

第1引数： プレイヤ−の配置されているディレクトリ位置（例では、同一ディレクトリなので、"./" を指定しています）
第2引数： 再生ファイルの URL（例では、同一ディレクトリなのでファイル名のみを指定している）

また、もっとも単純な使用方法で表示されるプレイヤーは、それぞれ以下の大きさ（ピクセル）で固定されています。

FLV プレイヤー: 横幅=320、高さ=320
MP3 プレイヤー: 横幅=320、高さ=80

プレイヤーの大きさを指定する

プレイヤーの大きさを指定する場合には、プレイヤー呼び出し部分をつぎのように記述します。

 <script type="text/javascript"><!--
 Flash.FLVPlayer("./", "sample.flv", 320, 320);
 Flash.MP3Player("./", "MySong.mp3", 320, 80);
 //-->
 </script>

つまり、各プレイヤー（FLVPlayer、MP3Player）呼び出しの一般的書式は、つぎのとおりです。

第1引数： プレイヤ−の配置されているディレクトリ位置（例では、同一ディレクトリなので、"./" を指定しています）
第2引数： 再生ファイルの URL（例では、同一ディレクトリなのでファイル名のみを指定している）
第3引数： プレイヤーの横幅（単位：ピクセル）
第4引数： プレイヤーの高さ（単位：ピクセル）

FLVPlayer の注意

FLVPlayer 呼び出し時に第3引数、第4引数を省略した場合は、それぞれ 320 が省略時の値として設定されます。以下の例では、横幅 320 * 高さ 320 のプレイヤーが生成されます。

 <script type="text/javascript"><!--
 Flash.FLVPlayer("./", "sample.flv");
 //-->
 </script>

第3引数の横幅指定に、320 より小さい値を指定した場合は、その値は無視されて 320 に設定されます。つまり、横幅に 320 ピクセルより小さい値は指定できません。以下の例では、横幅の 240 が無視されて、横幅 320 * 高さ 320 のプレイヤーが生成されます。

 <script type="text/javascript"><!--
 Flash.FLVPlayer("./", "sample.flv", 240, 320);
 //-->
 </script>

第4引数の高さ指定に、240 より小さい値を指定した場合は、その値は無視されて 240 に設定されます。つまり、高さに 240 ピクセルより小さい値は指定できません。以下の例では、横幅の 160、高さの 160 共に無視されて、横幅 320 * 高さ 240 のプレイヤーが生成されます。

 <script type="text/javascript"><!--
 Flash.FLVPlayer("./", "sample.flv", 160, 160);
 //-->
 </script>

MP3Player の注意

MP3Player 呼び出し時に第3引数、第4引数を省略した場合は、第3引数に 320、第4引数に 80 が省略時の値として設定されます。以下の例では、横幅 320 * 高さ 80 のプレイヤーが生成されます。

 <script type="text/javascript"><!--
 Flash.MP3Player("./", "MySong.mp3");
 //-->
 </script>

第3引数の横幅指定に、320 より小さい値を指定した場合は、その値は無視されて 320 に設定されます。つまり、横幅に 320 ピクセルより小さい値は指定できません。以下の例では、横幅の 240 が無視されて、横幅 320 * 高さ 80 のプレイヤーが生成されます。

 <script type="text/javascript"><!--
 Flash.MP3Player("./", "MySong.mp3", 240, 80);
 //-->
 </script>

第4引数の高さ指定に、60 より小さい値および 80 より大きい値を指定した場合は、その値は無視されて 80 に設定されます。つまり、高さに 60 ピクセルより小さい値および 80 ピクセルより大きい値は指定できません。以下の例では、横幅の 160、高さの 160 共に無視されて、横幅 320 * 高さ 80 のプレイヤーが生成されます。

 <script type="text/javascript"><!--
 Flash.MP3Player("./", "MySong.mp3", 160, 160);
 //-->
 </script>

通常、高さには、60 または 80 を指定するようにして下さい。 65 とか 70 などを指定してもあまり意味がありません。

詳しい使い方

推奨ブラウザのチェックの組込み

ここでは、推奨・非推奨ブラウザのチェックを組込む方法について説明します。

ブラウザのチェックを行い、非推奨ブラウザの場合、メッセージ表示を行うことができます。なお、メッセージ表示の方法には、つぎの2種類の方法があります。

チェックを行い、メッセージ（非推奨ブラウザの場合）を、警告ダイアログで表示する
チェックを行い、メッセージ（非推奨ブラウザの場合）を、段落（p要素）で表示する

警告ダイアログによる表示

非推奨ブラウザのメッセージを警告ダイアログで表示する場合は、Browser.checkBrowser メソッドの引数に数値"2"を指定して呼び出します。

 Browser.checkBrowser(2);

実際には、JavaScript 組込み部分移行の head 要素内に記述するようにします。

 <script type="text/javascript" src="browser.js"></script>
 <script type="text/javascript" src="player.js"></script>
 <script type="text/javascript"><!--
 Browser.checkBrowser(2);
 //-->
 </script>

非推奨ブラウザの場合には、警告ダイアログ内に以下のようなメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。

お使いのブラウザ環境は検証されていません。正常に表示できない可能性があります。

段落（p要素）として表示

非推奨ブラウザのメッセージを段落（p要素）で表示する場合は、Browser.checkBrowser メソッドの引数に数値"1"を指定して呼び出します。

 Browser.checkBrowser(1);

実際には、body 要素内の適当な場所に以下のように記述します。

 <script type="text/javascript"><!--
 Browser.checkBrowser(1);
 //-->
 </script>

非推奨ブラウザの場合には、以下のようなp要素を生成してメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。

 <p>お使いのブラウザ環境は検証されていません。正常に表示できない可能性があります。</p>

また、この p要素に特定の id属性を指定したい場合には、Browser.checkBrowser メソッドの第2引数に id属性の値を指定します。

 <script type="text/javascript"><!--
 Browser.checkBrowser(1, "browserMsg");
 //-->
 </script>

id属性を指定した場合には、以下のような p要素を生成します。このメッセージに特定のスタイルを適用したい場合には、この id属性の指定を利用します。

 <p id="browserMsg">お使いのブラウザ環境は検証されていません。正常に表示できない可能性があります。</p>

Flash プラグインのチェックの組込み

ここでは、Flash プラグインのチェックを組込む方法について説明します。

バージョン 9 以上のFlash プラグインが組込まれているかどおうかのチェックを行い、組込まれていない場合は、メッセージ表示を行うことができます。なお、メッセージ表示には、つぎの2種類の方法があります。

チェックを行い、メッセージを、警告ダイアログで表示する
チェックを行い、メッセージを、段落（p要素）で表示する

警告ダイアログによる表示

バージョン 9 以上のFlash プラグインが組込まれていない場合、メッセージを警告ダイアログで表示する場合は、Browser.isFlashPlugin メソッドの引数に数値"2"を指定して呼び出します。

 Browser.isFlashPlugin(2);

実際には、JavaScript 組込み部分移行の head 要素内に記述するようにします。

 <script type="text/javascript" src="browser.js"></script>
 <script type="text/javascript" src="player.js"></script>
 <script type="text/javascript"><!--
 Browser.isFlashPlugin(2);
 //-->
 </script>

バージョン 9 以上のFlash プラグインが組込まれていない場合には、警告ダイアログ内に以下のようなメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。

Flash ver.9 or later プラグインがインストールされていません。

段落（p要素）として表示

バージョン 9 以上のFlash プラグインが組込まれていないメッセージを段落（p要素）で表示する場合は、Browser.isFlashPlugin メソッドの引数に数値"1"を指定して呼び出します。

 Browser.isFlashPlugin(1);

実際には、body 要素内の適当な場所に以下のように記述します。

 <script type="text/javascript"><!--
 Browser.isFlashPlugin(1);
 //-->
 </script>

バージョン 9 以上のFlash プラグインが組込まれていない場合には、以下のようなp要素を生成してメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。

 <p>Flash ver.9 or later プラグインがインストールされていません。</p>

また、この p要素に特定の id属性を指定したい場合には、Browser.isFlashPlugin メソッドの第2引数に id属性の値を指定します。

 <script type="text/javascript"><!--
 Browser.isFlashPlugin(1, "flashMsg");
 //-->
 </script>

id属性を指定した場合には、以下のような p要素を生成します。このメッセージに特定のスタイルを適用したい場合には、この id属性の指定を利用します。

 <p id="flashMsg">Flash ver.9 or later プラグインがインストールされていません。</p>

プレイヤーの制御

FLVPlayer、MP3Player ともに以下の項目を制御することができます。

自動再生
音量の初期設定
ループ再生

オートスタート

オートスタートを制御するためには、Flash.setAutoStart メソッドを使用します。引数に true を指定した場合、プレイヤーを読み込むと自動的に再生が始まります。また、false を指定した場合は、自動再生を行いません。初期状態は、false です。

 <script type="text/javascript"><!--
 Flash.setAutoStart(true);
 Flash.MP3Player("./", "MySong.mp3");
 //-->
 </script>

音量の初期設定

プレイヤー起動時の音量を制御するためには、Flash.setVolume メソッドを使用します。引数に 0 から 100 までの音量（比率）を指定します。初期状態は、80 に設定されています。

 <script type="text/javascript"><!--
 Flash.setVolume(50);
 Flash.MP3Player("./", "MySong.mp3");
 //-->
 </script>

ループ再生

再生が終了した後、また最初から再生を繰り返すループ再生を制御するためには、Flash.setLoop メソッドを使用します。引数に true を指定した場合はループ再生されます。また、false を指定した場合には、ループ再生は行われず、再生が終了すると先頭に巻き戻されます。初期状態は、false です。

 <script type="text/javascript"><!--
 Flash.setLoop(true);
 Flash.MP3Player("./", "MySong.mp3");
 //-->
 </script>

プレイヤーの一括制御

たとえば、「自動再生する、音量の初期設定 50、ループ再生する」の場合、つぎのように記述します。なお、それぞれのメソッドは、プレイヤーの呼び出し以前に記述してあれば、順不同です。

 <script type="text/javascript"><!--
 Flash.setAutoStart(true);
 Flash.setVolume(50);
 Flash.setLoop(true);
 Flash.MP3Player("./", "MySong.mp3");
 //-->
 </script>

このようにすべての制御項目を指定する場合には、一括指定できる Flash.setOperation メソッドを利用することもできます。

 <script type="text/javascript"><!--
 Flash.setOperation(true, 50, true);
 Flash.MP3Player("./", "MySong.mp3");
 //-->
 </script>

Flash.setOperation メソッドの引数は、つぎの書式になります。

第1引数： 自動再生の指定
第2引数： 音量の初期設定
第3引数： ループ再生の設定

Hime - 姫

MP3FLVPlayer ～ MP3 & FLV プレイヤー

MP3FLVPlayer とは何ですか？

MP3FLVPlayer の実行環境

インストール

まずは使ってみよう

もっとも単純な方法

プレイヤーの大きさを指定する

FLVPlayer の注意

MP3Player の注意

詳しい使い方

推奨ブラウザのチェックの組込み

警告ダイアログによる表示

段落（p要素）として表示

Flash プラグインのチェックの組込み

警告ダイアログによる表示

段落（p要素）として表示

プレイヤーの制御

オートスタート

音量の初期設定

ループ再生

プレイヤーの一括制御