flash素材 - 宝珠型ミニmp3プレイヤー ver1.1
2008-09-01 14:27:45 update
webページに音声を貼るのに使うflash素材です。
違う機能・デザインのものはこちらから
特徴は、
宝珠型ミニmp3プレイヤー
宝珠型ミニmp3プレイヤー[onClick]
シンプルなミニmp3プレイヤー
mp3カプセル
mp3カプセル2
mp3再生ボタン
違う機能・デザインのものはこちらから
特徴は、
- mp3データ１ファイルにつき１つのプレイヤーを表示
- ファイル名の指定もかんたん
- ファンタジー系のサイトに合うデザイン
- 色をRGB値指定で自由にカスタマイズ
- mp3読み込み失敗に対応 new!
ご注意
- 2008.08.31 FLASH埋め込みの解説に使用しているjsライブラリを、AC_RunActiveContent.js → swfobject.jsに変更しました。
宝珠型ミニmp3プレイヤー
宝珠型ミニmp3プレイヤー[onClick]
シンプルなミニmp3プレイヤー
mp3カプセル
mp3カプセル2
mp3再生ボタン
サンプルを見る
ダウンロードした .lzh ファイルを解凍すると、
mp3mini.html , mp3mini.swf があります。
同じフォルダに適当なmp3を入れて、「test.mp3」という名前にしてください。
swfobject.js も同じフォルダに入れて下さい。
mp3mini.html をブラウザで開くと、mp3mini.swf が表示されていますので
クリックしてみてください。
mp3が演奏されます。
再生時の挙動（イメージ）
読み込み中 |
再生可能 |
再生中 |
一時停止 |
停止 |
読み込み失敗 |
をドラッグして重ねると停止します。カラーバリエーション
| 色を指定しない | 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]
|
使い方
mp3mini.swf , .mp3 ファイル , swfobject.js をアップロードします。
そしてhtmlファイルを以下のように書き換えます。
まず、<head> ～ </head>に、
<script type="text/javascript" src="swfobject.js"></script>
という１行を描き加えます。ミニmp3プレイヤーを表示したい部分には以下のソースをコピペし、
色名とファイル名の部分を書き換えます。
<script type="text/javascript">
var flashvars = {
bgColor: "0x0080B0",
soundFile: "test.mp3"
}
var params = {
wmode: "transparent"
};
var attributes = {};
swfobject.embedSWF("mp3mini.swf", "mp3mini", "32", "32", "8.0.0","", flashvars, params, attributes);
</script>
<div id="mp3mini">
[<a href="test.mp3">sample</a>]
</div>
var flashvars = {
bgColor: "0x0080B0",
soundFile: "test.mp3"
}
var params = {
wmode: "transparent"
};
var attributes = {};
swfobject.embedSWF("mp3mini.swf", "mp3mini", "32", "32", "8.0.0","", flashvars, params, attributes);
</script>
<div id="mp3mini">
[<a href="test.mp3">sample</a>]
</div>
3行目
bgColor: "0x0080B0",
背景色を16進数で指定します。0xFFFFFF - 0x000000htmlでおなじみのアレ どんな色でもOKですが、濃いめの色をおすすめします。
省略可能です。
4行目
soundFile: "test.mp3"
.mp3のファイル名を指定します。別フォルダに置いたときは絶対パスでも相対パスでも指定できます。
10行目
swfobject.embedSWF("mp3mini.swf", "mp3mini", "32",...
13行目
<div id="mp3mini">
英数字で適当なidをつけます。この2ヶ所は同じにしてください。FLASHが有効なとき、divタグの中身がFLASHに置き換えられます。複数のFLASH mp3プレイヤーを表示させるとき、プレイヤー1つごとにこのidを変えます。（でないと、最後の1つしか表示されません）
14行目
<div>～</div>に、適当なテキストや画像をいれておくと、FLASHが使えないとき、かわりに表示されます。
以上
ver.1.1 2008/03/21
使い方修正 2008/08/31
使い方修正 2008/08/31
