宝珠型ミニmp3プレイヤー[onClick] ver1.0

2008.08.30 23:32:56 , Posted
2008.09.01 14:27:08 , Update by Gyokuei

webページに音声を貼るのに使うflash素材です。
違う機能・デザインのやつはこちらから
前ver「宝珠型ミニmp3プレイヤー」はこちら

宝珠型ミニmp3プレイヤーの別verです。特徴は、

mp3データ１ファイルにつき１つのプレイヤーを表示
ファイル名の指定もかんたん
ファンタジー系のサイトに合うデザイン
色をRGB値指定で自由にカスタマイズ
mp3読み込み失敗に対応
flash読み込み時には外部mp3を読み込まず、視聴者のクリックで読み込み開始する new!

ひとつのページにたくさんの・または重いmp3を列挙するとき、アクセスが多い場合などは、従来のものだとページの表示と同時にすべてのmp3も読み込むため、転送量がたいへんなことになります。負荷を気にする方はこちらを使うといいかもしれません。見栄えや使い方はほとんど一緒です。

　　

ダウンロード（lzh圧縮、2.51 k）

注意

flashの作成者は玉英です。
再配布は自由ですが、再配布の際には必ずこのページをご紹介ください。
2008.08.31 FLASH埋め込みの解説に使用しているjsライブラリを、AC_RunActiveContent.js → swfobject.jsに変更しました。

サンプルを見る

こちらのページに手順を掲載してあります。

ダウンロードした .lzh ファイルを解凍すると、
mp3mini.html , mp3mini.swf があります。
同じフォルダに適当なmp3を入れて、「test.mp3」という名前にしてください。
swfobject.js も同じフォルダに入れて下さい。

mp3mini.html をブラウザで開くと、mp3mini.swf が表示されていますので
クリックしてみてください。
mp3が演奏されます。

再生時の挙動（イメージ）

mp3未DL

読み込み中

再生可能

再生中

一時停止

読み込み失敗

一時停止中に

をドラッグして重ねると停止します。

カラーバリエーション

色を指定しない	bgColor: "0x0080B0",	bgColor: "0x800000",
[sample]	[sample]	[sample]
bgColor: "0x555555",	bgColor: "0xFF5500",	bgColor: "0xFF6699",
[sample]	[sample]	[sample]
bgColor: "0xFFFFFF",	bgColor: "0xFFFF00",	bgColor: "0x55FF55",
[sample]	[sample]	[sample]

使い方

htmlファイルと同じフォルダに、
mp3mini.swf , .mp3 ファイル , swfobject.js をアップロードします。

そしてhtmlファイルを以下のように書き換えます。

まず、<head> ～ </head>に、

という１行を描き加えます。

ミニmp3プレイヤーを表示したい部分には以下のソースをコピペし、
色名とファイル名の部分を書き換えます。

3行目

bgColor: "0x0080B0",

背景色を16進数で指定します。0xFFFFFF - 0x000000
htmlでおなじみのアレ　どんな色でもOKですが、濃いめの色をおすすめします。
省略可能です。

4行目

soundFile: "test.mp3"

.mp3のファイル名を指定します。絶対パスでも相対パスでもOKです。

10行目

swfobject.embedSWF("mp3mini.swf", "mp3mini", "32",...

13行目

英数字で適当なidをつけます。この2ヶ所は同じにしてください。FLASHが有効なとき、divタグの中身がFLASHに置き換えられます。
複数のFLASH mp3プレイヤーを表示させるとき、プレイヤー1つごとにこのidを変えます。（でないと、最後の1つしか表示されません）

14行目
<div>～</div>に、適当なテキストや画像をいれておくと、FLASHが使えないとき、かわりに表示されます。

以上

ver.1.1 2008/03/21
使い方修正 2008/08/31