「MP3 Player」というswfのMP3 Playerをjavascriptを使って簡単に呼び出せるようにしました。objectタグで記述しなければいけないのがめんどくさかったので、何とかならないかと思った結果、こうなりました。
「MP3 Player」というMP3 Playerについては以下を参照してください。
http://flash-mp3-player.net/
以下のファイルが同梱されています。
使用するファイルは以下の通りです。
最初に「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_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つの項目の値を編集します。
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>
それぞれのディレクトリのパスは、自分の設定に合わせて変更してください。
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ってことで。(正直、ライセンス関係はよく分かりません。)
不明な点は、答えられる範囲でお答えしたいと思いますので、お問い合わせください。寄せられたご意見・ご質問はicoro上でご紹介する事もあると思うので、その点ご了承ください。