flash素材 - シンプルなミニmp3プレイヤー ver1.01
webページに音声を貼るのに使うflash素材、第3弾です。
2008-09-01 14:26:34 update
webページに音声を貼るのに使うflash素材です。
違う機能・デザインのものはこちらから
内部のスクリプトや使い方は第2弾までとあまりかわりません。
たくさん並べても邪魔にならない、をテーマに作成してみました。
宝珠型ミニmp3プレイヤー
宝珠型ミニmp3プレイヤー[onClick]
シンプルなミニmp3プレイヤー
mp3カプセル
mp3カプセル2
mp3再生ボタン
違う機能・デザインのものはこちらから
内部のスクリプトや使い方は第2弾までとあまりかわりません。
たくさん並べても邪魔にならない、をテーマに作成してみました。
- mp3データ１ファイルにつき１つのプレイヤーを表示
- ファイル名の指定とタイトルの表示ができる
- シンプルなデザイン
- 背景色、バーの色をRGB値指定で自由にカスタマイズ
- 文字色は、黒と白の2種類
- mp3読み込み失敗に対応
- flash読み込み時には外部mp3を読み込まず、訪問者のクリックで読み込み開始する
- ローディングバー、再生位置バーつき new!
宝珠型ミニmp3プレイヤー
宝珠型ミニmp3プレイヤー[onClick]
シンプルなミニmp3プレイヤー
mp3カプセル
mp3カプセル2
mp3再生ボタン
サンプルを見る
ダウンロードした .lzh ファイルを解凍すると、
mp3moji.html , mp3moji.swf があります。
同じフォルダに適当なmp3を入れて、「test.mp3」という名前にしてください。
swfobject.js も同じフォルダに入れて下さい。
mp3moji.html をブラウザで開くと、mp3moji.swf が表示されていますので
クリックしてみてください。
mp3が演奏されます。
(白文字版というフォルダにはmp3moji_b.html , mp3moji_b.swfが入っています。使い方は同様です。)
再生時の挙動（イメージ）
読み込み中
再生中
一時停止
再生可能
読み込み失敗
一時停止中に
をドラッグして重ねると停止します。カラーバリエーション
| 何も指定しない | barColor: "0x0080B0", |
|
[sample]
|
[sample]
|
| bgColor: "0xFFEEEE", barColor: "0xFF0000", soundTitle: "sample02", | bgColor: "0xFFFF00", barColor: "0x0055FF", |
|
[sample]
|
[sample]
|
| 白文字版、barColor: "0xFFFF00", soundTitle: "voicefile", | 白文字版、bgColor: "0xFF6699", barColor: "0x00FF00", soundTitle: "file001", |
|
[sample]
|
[sample]
|
| 白文字版 色を指定しない | 白文字版 bgColor: "0x008000", barColor: "0xFFFFFF", |
|
[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: "0xFFFFEE",
barColor: "0xFF5500",
soundTitle: "sound",
soundFile: "test.mp3"
}
var params = {
wmode: "transparent"
};
var attributes = {};
swfobject.embedSWF("mp3moji.swf", "mp3moji", "180", "15", "8.0.0","", flashvars, params, attributes);
</script>
<div id="mp3moji">
[<a href="test.mp3">sample</a>]
</div>
var flashvars = {
bgColor: "0xFFFFEE",
barColor: "0xFF5500",
soundTitle: "sound",
soundFile: "test.mp3"
}
var params = {
wmode: "transparent"
};
var attributes = {};
swfobject.embedSWF("mp3moji.swf", "mp3moji", "180", "15", "8.0.0","", flashvars, params, attributes);
</script>
<div id="mp3moji">
[<a href="test.mp3">sample</a>]
</div>
3行目
bgColor: "0x0080B0",
背景色を16進数で指定します。0xFFFFFF - 0x000000省略可能です。
4行目
barColor: "0xFF5500",
ローディングバー・再生位置バーの色を16進数で指定します。0xFFFFFF - 0x000000省略可能です。
5行目
soundTitle: "sound",
プレイヤー上に表示するタイトルを指定します。英数字のみ、8文字程度で。6行目
soundFile: "test.mp3"
.mp3のファイル名を指定します。絶対パスでも相対パスでもOKです。12行目
swfobject.embedSWF("mp3mini.swf", "mp3moji", "32",...
14行目
<div id="mp3moji">
英数字で適当なidをつけます。この2ヶ所は同じにしてください。FLASHが有効なとき、divタグの中身がFLASHに置き換えられます。複数のFLASH mp3プレイヤーを表示させるとき、プレイヤー1つごとにこのidを変えます。（でないと、最後の1つしか表示されません）
16行目
<div>～</div>に、適当なテキストや画像をいれておくと、FLASHが使えないとき、かわりに表示されます。
以上
ver.1.01 2008/08/31
