javascriptで呼び出せるようにしてみました。

　「MP3 Player」というswfのMP3 Playerをjavascriptを使って簡単に呼び出せるようにしました。objectタグで記述しなければいけないのがめんどくさかったので、何とかならないかと思った結果、こうなりました。

　「MP3 Player」というMP3 Playerについては以下を参照してください。
http://flash-mp3-player.net/

ファイルの内容

　以下のファイルが同梱されています。

設置方法

使用するファイルの確認

　使用するファイルは以下の通りです。

player_mp3_maxi.swfの設定

最初に「player_mp3_maxi.swf」を設定します。「player_mp3_maxi.swf」の設定には「config.xml」を使用します。config.xmlについては、以下のページを参照。

http://flash-mp3-player.net/players/maxi/generator/

　上記のページで、playerの設定をいじり、「Content of the configuration XML file」に表示されたソースをコピーし、適当な名前(ここでは「config.xml」という名前)で保存します。

player.jsの設定

　player.jsを開くと、冒頭に以下の記述があります。

//player_mp3_maxi.swfのパス
var player_path = './swf/player_mp3_maxi.swf';

//config.xmlのパス
var config_path = './swf/config.xml';

//mp3ファイルを保存しているディレクトリ
var mp3_path = './mp3/';

//MP3 Playerのwidth(横幅)
//config.xmlに記述したwidthと同じ値を入力します
var player_width = 380;

ここで以下の4つの項目の値を編集します。

mootools.jsとplayer.jsにリンクする

　playerを表示したいhtmlファイルから、mootools.jsとplayer.jsにリンクします。
　headタグ内に以下の記述を加えます。

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

　それぞれのディレクトリのパスは、自分の設定に合わせて変更してください。

playerを表示する部分を設定する

　hmtlファイル内の実際にplayerを表示させたいところに、以下の記述をします。

<div class="mp3">(MP3ファイル名)</div>

　「class="mp3"」になっていれば、divタグでもpタグでもOKです。例えば、

<div class="mp3">test.mp3</div>

とすると、player.jsは「player.jsの設定」で「mp3_path」に設定したディレクトリ内にある「test.mp3」というmp3ファイルを参照します。

ファイルをアップロードする。

　以下のファイルを適切な場所にアップロードします。

　「player.js」なんてありふれた名前なので、すでに同名のファイルがある場合があるかもしれません。その場合は適当にリネームして使ってください。リネームしても特に動作に問題はないと思います。

使用例

　「example」フォルダに使用例を入れました。説明だけではわかりにくいところが多々あると思うので、exampleのファイルをいじくり回してみてください。

ライセンス

　ライセンスは、「MP3 Player」がMPL 1.1で配布しているらしいので、このjavascriptもMPL 1.1ってことで。(正直、ライセンス関係はよく分かりません。)

履歴

2008/06/14
mootools.jsをver. 1.2にバージョンアップ。
コードを整理。(若干軽くなりました。)
2008/04/30
とりあえず公開

その他

　不明な点は、答えられる範囲でお答えしたいと思いますので、お問い合わせください。寄せられたご意見・ご質問はicoro上でご紹介する事もあると思うので、その点ご了承ください。