MP3FLVPlayer ～ MP3 & FLV プレイヤー

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

Outline

MP3FLVPlayer とは何ですか？
MP3FLVPlayer の実行環境
インストール
使用方法
- もっとも単純な方法
- ブラウザチェックの組込み
  - 警告ダイアログによる表示

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.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.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

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

つぎにブラウザのチェックおよび Flash プレイヤーのチェックを組込む方法について説明します。

ブラウザのチェックを行い、非推奨ブラウザの場合、そのメッセージ表示に2種類の方法があります。

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

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

非推奨ブラウザのメッセージを警告ダイアログで表示する場合は、JavaScript 組込み部分の下に次のように記述します。

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

Hime - 姫