彦市   » MP3プレヤーの設置

TOP

サブカテゴリー

MP3_Webプレヤーの設置
今回はFMP3プレヤーの設置で長時間苦労しました。
ホームページやブログにも関係記事をあまり見かけませんので、参考までに解説します。

1.フラッシュ再生プレヤーについて

一般に、オーディオ・データはmp3仕様で圧縮されています。
この.mp3ファイルをホームページ上で再生するには問題があり ます。
.wavファイルならば、そのままオーディオ出力できますが、圧縮ファイルでは復元処理しなければなりません。
ところが、データ量が大きいmp3ファイルでは、読み出し時間の制約から正しく復元することができず、エラーとなります。
そこで、外部のサーバーにある変換プログラムを介して、.mp3 のデータを.swf データに変換して特別な記憶場所(クーキーと同様な原理でシス テム内に一時保管する)に保存すれば、見かけ上はフラッシュ・プレヤーで.mp3ファイルが再生されることになります。こ の.swf データはアドビ社のフラッシュ・プレヤーでどこからでも再生できます。

2.DewPlayer の設置

フランスのDew氏により設計されたFMP3プレヤーです。
Java言語の.swf(ShockWaveFlash)形式のファイルで.mp3をWeb上で再生するフリーソフトです。
下記のサイトからダウンロードできます。
http://www.alsacreations.fr/dewplayer.html 

表示形式が多種類あります。
私はプレイリスト形式を使用しています。
説明はフランス語ですが、サンプル・コードの説明がありますので、コピパして自分の条件に書き換えます。
英語版はこちらです。http://www.alsacreations.fr/dewplayer-en.html

注意点を列挙します。

1。 プレイリスト形式では、mp3= をxml= として.xml ファイルにリンクさせる。
この.xmlファイルは下記のサイトにある指定のXSPF様式で書かなければなりません。
http://www.xspf.org/ 
XSPFとは、 XML format for sharing playlistsの略で、エクセル様式の標準規約です。

2。 mp3のサウンド・ファイルにリンクさせるには.xmlファイル上で絶対パスで書かないと読み取りません。
そこで、記述を簡略する為に、私は.xmlファイルとサウンド・ファイルを同一ディレクトリに入れて、直接アクセスとしました 。
サウンド・ファイル名/曲名.mp3としました。
日本語表示はできません。 
 
3。 自分のHPアドレス内のパス表示は、相対パスでOKです。
私の場合は、FMP3ディレクトリにすべて収めたので、../FMP3/・・・となります。

4。 .swfファイルを読み出すために、同一ディレクトリ内に、"swfobject.js"ファイルが必要です。
これは、圧縮されたプレヤーの.swfファイルをダウンロードすると添付されています。

5。 InternetExplorers10 を使用すると、「標準モード」で再生できない場合があります。
この場合には、「互換表示設定」でエミュレートすると再生できます。
Webページの要素の中に次のコードを記述すれば、強制的にモード変更が出来ます。


3.Enricolai Playerの設置

イタリアのエンリコライ社の設計による世界的に有名なフリーソフトです。
下記のサイトからダウンロードできます。
http://www.enricolai.com/fmp3/xspf-flash-mp3-player.asp

私は、XSPF Extended Version を使用しています。

説明がイタリア語であり、オプションタグが判らなくて苦労しました。
標準仕様の英語版があります。
http://www.google.com/translate?u=http://www.enricolai.com/FMP3/FMP3-flash-mp3-player.asp&langpair=it|
en&hl=en&ie=UTF8

曲名に日本語が使用できます。
シャッフル選曲(ランダム・アクセス)が最初に行われて、選曲リストに反映されます。
この2点では、DewPlayerに較べて優れています。

顔写真は、私の応用です。本来はジャケットのカバーを表示するためです。
.xmlファイルで、***.jpgを追加して、***.mp3リストの全曲に設定しました。
コードの記述では、オプションで&loadfoto=../FMP3/***.jpgとしました。FMP3はフォルダ名です。

その他の注意点

1。 ディスプレイの設定は、1@.- @0@ - @.のところです。
先頭の1はリスト表示で連番が付加されます。これを2にすると、連番が無くて曲名から出ます。
中間の0は、曲名のみ表示されます。これを2~4の数字に替えると、.xmlファイルのタグに記載の項目が組み合わされて表示
されます。@-@のハイフォンやスペースを追加するとその分間隔が変わります。

2。 画像のサイズは、80×80ピクセルです。画像は、FMP3フォルダに入れます。

3。 .xmlファイルは、DewPlayerと同様でXSPFに準処して記述します。

4.Yahoo! MediaPlayerの設置

このプレヤーは、1行の埋め込みコード だけで働きます。
プレイヤーがmp3ファイルのリンク関係を探し出して、正しく 設定されていると、自身で読み込んでくれます。
プレヤー画像にサウンド・ファイルの全曲数が表示されます。
このデータは、アド・オンデータとして、ローカル・サーバーに残ります。

Yahooのサーバーで処理してもらい、結果を受け取る構成です。
埋め込むコードは、下記のサイトからダウンロードできます。
http://webplayer.yahoo.com/get/#_

HP内ののタグの直前に下記の1行を挿入すれば完了です。


オプションで、制御を追加することも出来ます。これは下記のサイトに詳細が説明されています。
http://webplayer.yahoo.com/docs/how-to-set-up/

設置の注意点

1。 多数の曲を再生するには、別に、HP上に曲名リスト表を作成します。
この曲名を「リンク・ボタン」としてサウンド・ファイルの.mp3ファイルにリンクを設定します。

2。 リンクする.mp3ファイルは、相対パスで設定します。

3。 正しく設定が出来ていると、アップロードしてHPを呼び出した時、有効な MP3 ファイルのリンクには左端に小さな再生 ボタンが付きます。またリンク文字が斜体に変化します。
あわせてページの左下にオーバレイ表示されたプレイヤーが表示されます。
プレヤーにはリンク文字が表示されます。

5.サーバーの負担を軽減する

mp3サウンド・ファイルは、圧縮されていると言ってもデータ容量がとても大きいです。
私の例では、短曲ばかりの100曲で約300MBです。
従って、プレヤーの異なったものを並存したり、BGMとして別に作成すると、サウンド・ファイルを共用するように計画しな ければなりません。

また、せっかくホームページに載せても、利用者がJavaScriptの受け入れを許可してくれなければ再生できません
アドビ・フラッシュ・プレヤーのインストールも同様です。
(Add-Onの"ShockwaveFlashObject"と"JavaPlug-In"が共に「有効」になっていること。)

一般には、mp3ファイルを1曲づつ再生する程度であれば、WindowsMediaPlayer のプラグインで充分でしょう。
普通に.mp3ファイルへボタン画像からリンクを張るとプラグインが起動して、別ウィンドを開いて再生してくれます。