このエントリーをはてなブックマークに追加 RSS mailform
見る


銀の月動画計画 > あにめはっく.jp > 素材屋トップ > web素材 > 宝珠型ミニmp3プレイヤー ver1.1
flash素材 - 宝珠型ミニmp3プレイヤー ver1.1

2008-09-01 14:27:45 update

webページに音声を貼るのに使うflash素材です。
違う機能・デザインのものはこちらから


特徴は、
  • mp3データ1ファイルにつき1つのプレイヤーを表示
  • ファイル名の指定もかんたん
  • ファンタジー系のサイトに合うデザイン
  • 色を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]
使い方
htmlファイルと同じフォルダに、
mp3mini.swf , .mp3 ファイル , swfobject.js をアップロードします。

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



まず、<head> ~ </head>に、
<script type="text/javascript" src="swfobject.js"></script>
という1行を描き加えます。

ミニ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>


3行目
bgColor: "0x0080B0",
背景色を16進数で指定します。0xFFFFFF - 0x000000
htmlでおなじみのアレ どんな色でも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