mp3再生ボタン ver1.0

2008.09.01 02:36:14 , Posted
2008.09.01 14:24:33 , Update by Gyokuei

ミニmp3プレイヤー第6弾極小サイズ

webページに音声を貼るのに使うflash素材、第6弾です。

違う機能・デザインのやつはこちらから

極小のボタンサイズのmp3プレイヤーです。
ボタンに表示できるのは2桁程度までの数字

内部のスクリプトや使い方は第5弾「mp3カプセル」とほぼ一緒ですが
「一時停止中に←キーを押すと再生位置が最初に戻る」という隠し機能が追加されています。

mp3データ１ファイルにつき１つのプレイヤー
ファイル名の指定とタイトルの表示ができる
シンプルなデザイン
背景色、バーの色、文字色をRGB値指定で自由にカスタマイズ
mp3読み込み失敗に対応
flash読み込み時には外部mp3を読み込まず、訪問者のクリックで読み込み開始する
ローディングバー、再生位置バーつき

htmlのデザインの一部として、リストや他の画像などと組み合わせてお使いください。

　　

ダウンロード（lzh圧縮、3.42 KB）

サンプルを見る

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

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

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

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

カラーバリエーション

色を指定しない	barColor: "0x0080B0", soundTitle: "68",
[sample]	[sample]
bgColor: "0xFFEEEE", barColor: "0xFF0000", fontColor: "0xFF66CC", soundTitle: "02",	bgColor: "0xFFFF00", barColor: "0x0055FF", soundTitle: "55",
[sample]	[sample]
bgColor: "0xEEFFFF", barColor: "0x999900", fontColor: "0x005500", soundTitle: "10",	bgColor: "0xFF6699", barColor: "0x00FF00", soundTitle: "01",
[sample]	[sample]
bgColor: "0x000000", fontColor: "0xFFFFFF", soundTitle: "01",	bgColor: "0x008000", barColor: "0xFFFFFF", fontColor: "0xFFFF99", soundTitle: "01",
[sample]	[sample]
表示サイズを変更 32x32 bgColor: "0x000000", fontColor: "0xFFFFFF", soundTitle: "01",	表示サイズを変更 32x32 bgColor: "0x008000", barColor: "0xFFFFFF", fontColor: "0xFFFF99", soundTitle: "01",
[sample]	[sample]

使い方

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

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

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

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

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

3行目

bgColor: "0x0080B0",

背景色を16進数で指定します。0xFFFFFF - 0x000000
省略可能です。

4行目

barColor: "0xFF5500",

ローディングバー・再生位置バーの色を16進数で指定します。0xFFFFFF - 0x000000
省略可能です。

5行目

fontColor: "0x000011",

文字色を16進数で指定します。0xFFFFFF - 0x000000
省略可能です。

6行目

soundTitle: "01",

プレイヤー上に表示するタイトルを指定します。数字のみ、2文字まで。

7行目

soundFile: "test.mp3"

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

13行目

swfobject.embedSWF("mp3mini.swf", "mp3btn", "16",...

15行目

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

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

なお15行目「"16", "16",」は表示サイズです。flashは拡大しても綺麗に表示されますのでこの数値を変更すれば大きく表示することもできます。

以上

ver.1.0 2008/09/01