edit= MP3FLVPlayer ～ MP3 & FLV プレイヤー
'''この Wiki は、まだ、書き掛けのページです。'''
[FrontPage FrontPage に戻る]
[[PageOutline(start=2, depth=9, type=unordered)]]
== MP3FLVPlayer とは何ですか？
'''MP3FLVPlayer''' は、MP3 Player および FLV Player、さらにそれらを操作するためのいくつかの!JavaScriptから構成されるライブラリです。
Flash を操作するためには、[http://blog.deconcept.com/swfobject/ SWFObject 1.5] という有名な Flash 用の !JavaScript ライブラリがあります。
ただし、非常に高機能であり、単純なことを行う場合でも、それなりの記述をしなければなりません。!JavaScript を理解してるのであれば、この SWFObject を利用した方が良いのでしょうが、 そうでなければ、敷居が若干高くなることも否めません。
そこで、SWFObject の代替となるスクリプトと専用のMP3プレイヤーおよびFLVプレイヤーに特化したライブラリを作成しました。
なお、本ライブラリで使用するプレイヤーは、[http://www.adobe.com/jp/products/flex/ 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 以上
また、[http://www.adobe.com/shockwave/download/index.cgi?Lang=Japanese&P1_Prod_Version=ShockwaveFlash Adobe Flash Player] のバージョンは、9 以上でないと動作しません。
== インストール
1. [http://sourceforge.jp/projects/jhime/ プロジェクトページ]の最新リリース情報から[http://sourceforge.jp/projects/jhime/releases?package_id=7915 最新バージョン]をダウンロードします。
1. ダウンロードしたファイル (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 です。
{{{ code 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 を組み込みます。このとき'''組込み順序がありますので、つぎの記述通りに組み込みを行います。'''
{{{ code html
<script type="text/javascript" src="browser.js"></script>
<script type="text/javascript" src="player.js"></script>
}}}
実際のプレイヤーを呼び出している部分は、つぎの記述になります。
{{{ code html
<script type="text/javascript"><!--
Flash.FLVPlayer("./", "sample.flv");
Flash.MP3Player("./", "MySong.mp3");
//-->
</script>
}}}
FLV プレイヤーは、Flash.FLVPlayer メソッドを、MP3 プレイヤーは、Flash.MP3Player メソッドをそれぞれ呼び出します。各メソッドの書式は、つぎのようになります。
{{{ code javascript
Flash.FLVPlayer(
"./",
"sample.flv"
);
Flash.MP3Player(
"./",
"MySong.mp3"
);
}}}
1. '''第1引数：''' プレイヤ−の配置されているディレクトリ位置（例では、同一ディレクトリなので、"./" を指定しています）
1. '''第2引数：''' 再生ファイルの URL（例では、同一ディレクトリなのでファイル名のみを指定している）
また、もっとも単純な使用方法で表示されるプレイヤーは、それぞれ以下の大きさ（ピクセル）で固定されています。
* FLV プレイヤー: 横幅=320、高さ=320
* MP3 プレイヤー: 横幅=320、高さ=80
=== 推奨ブラウザのチェックの組込み
つぎに推奨・非推奨ブラウザのチェックを組込む方法について説明します。
ブラウザのチェックを行い、非推奨ブラウザの場合、メッセージ表示を行います。なお、メッセージ表示の方法には、つぎの2種類の方法があります。
* チェックを行い、メッセージ（非推奨ブラウザの場合）を、警告ダイアログで表示する
* チェックを行い、メッセージ（非推奨ブラウザの場合）を、段落（p要素）で表示する
==== 警告ダイアログによる表示
非推奨ブラウザのメッセージを'''警告ダイアログで表示'''する場合は、Browser.checkBrowser メソッドの'''引数に数値"2"を指定'''して呼び出します。
{{{ code javascript
Browser.checkBrowser(2);
}}}
実際には、!JavaScript 組込み部分移行の head 要素内に記述するようにします。
{{{ code html
<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"を指定'''して呼び出します。
{{{ code javascript
Browser.checkBrowser(1);
}}}
実際には、body 要素内の適当な場所に以下のように記述します。
{{{ code html
<script type="text/javascript"><!--
Browser.checkBrowser(1);
//-->
</script>
}}}
非推奨ブラウザの場合には、以下のようなp要素を生成してメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。
{{{ code html
<p>お使いのブラウザ環境は検証されていません。正常に表示できない可能性があります。</p>
}}}
また、この p要素に特定の '''id属性を指定したい場合'''には、Browser.checkBrowser メソッドの'''第2引数に id属性の値を指定'''します。
{{{ code html
<script type="text/javascript"><!--
Browser.checkBrowser(1, "browserMsg");
//-->
</script>
}}}
id属性を指定した場合には、以下のような p要素を生成します。このメッセージに特定のスタイルを適用したい場合には、この id属性の指定を利用します。
{{{ code html
<p id="browserMsg">お使いのブラウザ環境は検証されていません。正常に表示できない可能性があります。</p>
}}}
=== Flash プラグインのチェックの組込み
つぎに Flash プラグインのチェックを組込む方法について説明します。
バージョン 9 以上のFlash プラグインが組込まれているかどおうかのチェックを行い、組込まれていない場合は、メッセージ表示を行います。なお、メッセージ表示には、つぎの2種類の方法があります。
* チェックを行い、メッセージを、警告ダイアログで表示する
* チェックを行い、メッセージを、段落（p要素）で表示する
==== 警告ダイアログによる表示
バージョン 9 以上のFlash プラグインが組込まれていない場合、メッセージを'''警告ダイアログで表示'''する場合は、Browser.isFlashPlugin メソッドの'''引数に数値"2"を指定'''して呼び出します。
{{{ code javascript
Browser.isFlashPlugin(2);
}}}
実際には、!JavaScript 組込み部分移行の head 要素内に記述するようにします。
{{{ code html
<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"を指定'''して呼び出します。
{{{ code javascript
Browser.isFlashPlugin(1);
}}}
実際には、body 要素内の適当な場所に以下のように記述します。
{{{ code html
<script type="text/javascript"><!--
Browser.isFlashPlugin(1);
//-->
</script>
}}}
バージョン 9 以上のFlash プラグインが組込まれていない場合には、以下のようなp要素を生成してメッセージを表示します。なお、このメッセージは、browser.js を修正すれば、簡単に変更することができます。
{{{ code html
<p>Flash ver.9 or later プラグインがインストールされていません。</p>
}}}
また、この p要素に特定の '''id属性を指定したい場合'''には、Browser.isFlashPlugin メソッドの'''第2引数に id属性の値を指定'''します。
{{{ code html
<script type="text/javascript"><!--
Browser.isFlashPlugin(1, "flashMsg");
//-->
</script>
}}}
id属性を指定した場合には、以下のような p要素を生成します。このメッセージに特定のスタイルを適用したい場合には、この id属性の指定を利用します。
{{{ code html
<p id="flashMsg">Flash ver.9 or later プラグインがインストールされていません。</p>
}}}