So-net無料ブログ作成
» スポンサーリンク

ブログで使えるFlash MP3 Player
» 音楽系ブログパーツ 

最近 ブログや Web サイトに簡単に貼ることができる Flash Player で作られた埋め込み形式の MP3 プレイヤーが増えてきました。
今回はその中から選りすぐったシンプルなものをいくつか紹介します。

FLASH SINGLE MP3 PLAYER by JEROENWIJERING.COM

注:上記リンクの SINGLE MP3 PLAYER の配布は既に終了しています


 ↑上の表示以外にパラメータを指定することで縦横サイズ、背景色、前景色、ボリューム、オートプレイ、リピート再生、ファイルダウンロードボタン、などを設定することができます。

 再生ファイル名は URL で指定できるので、プレイヤー本体(SWF ファイル)と MP3 ファイルが別のWebサーバにあっても再生することができます(両ファイルとも自分で任意の場所に配置します)。

 設置の方法はサイトにある zip ファイルの中に簡単な例の HTML ファイルが入っています。EMBED/OBJECT タグを貼り付けたことがある人ならすぐに理解できるかと思います。

 再生はプレイヤー本体と MP3 ファイルが別のサーバにあってもできますが、ダウンロードボタンを有効にした場合は両ファイルを同じ場所におく必要があります。

[追記] 2007/05/29
残念ながら作者のサイトで配布が終わってしまっていました。
こちらに SWF 本体だけ置いてありますのでよかったらダウンロードして使ってください。


↓設置例
プレイヤーと MP3 ファイルの URL は各自のものに書き換えてください。
「http://~プレイヤーのURL~/singlemp3player.swf」
「http://~MP3のURL~/xxx.mp3」
<object type="application/x-shockwave-flash" 
width="200" height="20" 
data="http://~プレイヤーのURL~/singlemp3player.swf?file=http://~MP3のURL~/xxx.mp3&backColor=FFFFFF&frontColor=333333">
<param name="movie" value="http://~プレイヤーのURL~/singlemp3player.swf?file=http://~MP3のURL~/xxx.mp3&backColor=FFFFFF&frontColor=333333" />
<param name="wmode" value="transparent" />
</object>

オプションは MP3 ファイルの URL に続けて "&" を前につけて追加していきます。
 オプション  内 容
autoStart=true オートスタート有効 (デフォルトは false)
backColor=xxxxxx プレイヤーの色 (RGB 形式でそれぞれ256段階の16進数00~FFで指定)
frontColor=xxxxxx ボタンとバーの色 (RGB 形式でそれぞれ256段階の16進数00~FFで指定)
songVolume=100 ボリューム (0 ~ 100)
repeatPlay=true リピート再生 (デフォルトは false)←2007/07/27 追記
showDownload=true ダウンロードボタンの表示 (デフォルトは false)

備考:
  1. プレイヤーの幅を変更したい場合は width="200" を変更してください
  2. <param name="wmode" ~ のところはそのままでかまいません。
  3. showDownload を有効にした場合は、MP3 ファイルをプレイヤー本体 (SWF) と同じディレクトリに MP3 ファイルを置く必要があります。
  4. 記事の入力欄の見た目に合わせて自動的に改行タグ(<BR/>)が挿入されるブログは、貼り付けコードの改行をなくして1行にまとめて貼り付けてください。

DEWPLAYER by alsacreations


ノーマル

Mini (再生ボタンだけのタイプ)

 ↑上の表示以外にパラメータを指定することで縦横サイズ、背景色、前景色、ボリューム、オートプレイ、リピート再生、などを設定することができます。
 再生ファイル名は URL で指定できるので、プレイヤー本体(SWF ファイル)と MP3 ファイルが別のWebサーバにあっても再生することができます(両ファイルとも自分で任意の場所に配置します)。

 上記サイトに簡単設置のスクリプトウィザードがあるので、出力されるタグの必要な部分を書き換えれば手間が省けます。こちらも HTML(XHTML) の EMBED/OBJECT タグの知識がある人ならすぐに使い方は分かると思います。

 大抵のブログでは画像ファイルや音声ファイル、動画ファイル以外のアップロードはできない仕様になっている場合が多いですよね。上記2つのプレイヤーは本体の SWF ファイルをブログ以外の自分の Web サイトとか別のサーバに配置する必要があるのが難点と言えば難点です。

 次に紹介する del.icio.us の Play Tagger はプレイヤー本体が必要ないタイプです。


Play Tagger by del.icio.us


 Crickets' Clicks by TAN (sothicblue)

 Play Tagger の JavaScript を記事の適当なところに貼り付けると、アンカータグに関連付けられた MP3 ファイル名のリンクを判別してリンクの左側に自動的にプレイヤーを表示してくれます。SWF 本体はダウンロードする必要はなく JavaScript のを貼り付けるだけで簡単に利用できます。

<script type="text/javascript" src="http://static.delicious.com/js/playtagger.js"></script>

 ブログスキンの HEAD 内やサイドバーにコードを貼り付けることで過去記事のアンカータグの MP3 ファイルリンクにも自動でボタンが挿入されます。
 MP3 ファイルのリンクを del.icio.us に簡単にタグ付け&ポストできるオマケ機能(いや、こっちがメインか)もついています。


ここまで読んだ人は既に分かっているかもしれませんが、ブログサーバに MP3 ファイルをアップロードできない場合は、別のWebサイトにファイルの置き場所を用意する必要があることをお忘れなく。
(直接アクセスできないオンラインストレージなどは不可)


この記事で使っている曲(Crickets' Clicks)は TAN に著作権があります
Creative Commons License - Creative Commons クリエイティブ・コモンズ>帰属 - 非営利 - 派生禁止 2.1 日本

nice!(1)  コメント(49)  トラックバック(4)   » カテゴリー:音楽系ブログパーツ
permalink
trackback
このエントリーをはてなブックマークに追加


» スポンサーリンク
DMR

サウンドハウス


nice! 1

コメント 49

n_shuhei

>TANさん
初めてコメントさせて頂きます。
すばらしいFlash MP3 Playerの紹介ありがとうございました。いろいろとサーチしていたのですが、ようやく欲しいものと巡り会いました。やはり、音とか画像については英語のサイトのほうがかなり先をいっているのでしょうか。
隠居のお遊びでMTを弄っています。TBさせてもらいますね。
by n_shuhei (2006-07-20 16:58) 

TAN

参考にして頂けたようで、こちらこそありがとうございます。

日本人が作ったプレイヤーもいくつかあることはあるんですが、
デザインが自分好みじゃないのが多いんですよね・・・
プログラミングのスキルやセンスも大事ですが、
webではデザインのセンスも大事ですよね。
by TAN (2006-07-20 18:08) 

さいとう

TAN様
はじめてコメントさせていただきます。
記事にありました、
FLASH SINGLE MP3 PLAYER by JEROENWIJERING.COM
で、設置を試みています。
どうして、これを選んだかというと「ダウンロードボタン」を設置できるようなので。
ですが、どんなにさがしもてダウンロードボタンを設置できないのです。
どうか、ご教授くださいませ。

よろしくお願いします。
by さいとう (2007-05-29 20:20) 

TAN

リンク先のページがいつのまにか変わってますね。
SINGLE PLAYER はなくなってマルチ版だけになったようです。
もしかしたらマルチ版はダウンロードボタンが付けられないのかもしれません。

記事を追記しておきましたので、SINGLE PLAYER を使いたい場合は
参考にしてください。

SINGLE PLAYER の場合は、オプションに showDownload=true を
指定すればボタンが表示されます。
ただし、ダウンロードを有効にする場合はプレイヤー本体のSWFファイルと
MP3ファイルを同じディレクトリに置いておく必要があります。
by TAN (2007-05-29 21:41) 

さいとう

TAN様
早速のご返答ありがとうございました。
そうですか、このプレイヤーはかなり使えると思ったのですが、DLがないのは痛いですね。
もう一つのDewPlayerはシンプルでかなりよかったので、これでいこうかと思います。
DLボタンはないですけど。
ありがとうございました。
また、きます。
by さいとう (2007-05-29 22:09) 

さいとう

TAN様

SINGLE PLAYERのダウンロードありがとうございます。
こちらも使ってみました。

ひとつ質問があるのですが、「name」は何を表すのですか?
movieとwmodeとありますが?
すいません。
by さいとう (2007-06-05 21:26) 

TAN

nameはプレイヤーのパラメータではなく、
フラッシュとしての動作パラメータなのでそのままでよいです。
by TAN (2007-06-05 22:55) 

さいとう

TANさま

すいません。ありがとうございます。
これ、本当にいいですね。
by さいとう (2007-06-06 00:07) 

ななし

FLASH SINGLE MP3 PLAYERで音をループさせるには。。。。
by ななし (2007-07-26 21:49) 

TAN

>ループ再生

冒頭の説明で「リピート再生」て書いてたのにオプションの説明をすっかり忘れてました[汗汗]

repeatPlay=true

をオプションに指定してやればできます。
by TAN (2007-07-27 00:18) 

ななし

早々のお返事ありがとうございます。
パラメーター色々考えて(autoLoop=true、rePlay=trueとか…)やって諦めてたところでした・・。ありがとうございます。
by ななし (2007-07-27 13:26) 

RED

Simpleかつ感じの良いプレイヤーを探していたので
とても参考になりました。
さっそく設置して使ってます。
by RED (2007-08-31 21:32) 

TAN

また良さそうなのを見つけたら紹介したいと思います。

Flash(ActionScript)のプログラミングは前から興味があって、
本当は自分で作りたいんですが、最初の一歩を踏み出す時間がありません[汗汗]
by TAN (2007-08-31 23:14) 

みや

 はじめまして。『みや』と申します。

 数日前から、こちらのブログのほうで紹介してくださった、
『FLASH SINGLE MP3 PLAYER』を使わせていただいているのですが、
私のブラウザ(firefox)では表示してくれません。

 IEでは表示されるようなので、
ちゃんとアップは出来ているようなのですが・・・。


 firefoxで表示させるにはどのようにすればよいか、
ご存知でしたら教えていただけないでしょうか?

 よろしくお願いいたします。
by みや (2007-11-13 23:54) 

TAN

みやさんコメントありがとうございます。
こちらのミスです。申し訳ないです。

サンプルコードを参考に、OBJECTタグにある

data="プレイヤーのURLとパラメータ"

を追加してください。(movie属性のvalue=と同じです)
これでFirefoxでも表示されるはずです。
by TAN (2007-11-14 01:29) 

みや

 早速の返信、ありがとうございます!


早速教えていただいたとおりに、追加してみたところ、
Firefoxでも表示できるようになりました!

 本当にありがとうございました!!
by みや (2007-11-14 18:31) 

TAN

上手くいってよかったです[ニコニコ]
お手数をおかけしました。
by TAN (2007-11-14 22:43) 

黒い旗本

TAN様
FLASH SINGLE MP3 PLAYERのswfファイルをDLさせていただきました。探していました。貴重なものを…ありがとうございます。
記述タグ中、autostartの後の「flase」ですが、「false」ではないかと思われます。
by 黒い旗本 (2008-01-30 20:44) 

TAN

黒い旗本さん、ご指摘ありがとうございます。
初歩的ミスでお恥ずかしい・・・指摘されるまで気づきませんでした[汗汗]

スペルミスのままでも動いていたので、true/falseを使うパラメータは
trueの以外の文字を指定するとfalseと見なされるようです。
by TAN (2008-01-30 21:47) 

黒い旗本

こちらこそ、重箱の隅をつつくような指摘をしてしまい申し訳なかったです。
スペルミスは私などもしょっちゅうです。
おおっ!true以外は全部falseなんですねっ。
TAN様のお陰で、ずっと探していたファイルが見つかり、感謝しています。こちらのブログを今後も期待しながら注目し続けますので、執筆頑張ってください。
by 黒い旗本 (2008-01-31 23:45) 

nao

はじめまして。
こちらのサイトを参考にしながら、ブログへDEWPLAYERを貼り付けさせていただきました。
なんとか無事動いてくれたので一安心です。
とてもわかりやすく説明がされていたので助かりました。
今度は、ボリュームの調節にも挑戦してみたいと思います。
本当にシンプルで素敵なプレーヤーですね。
ありがとうございました。
by nao (2008-07-30 19:13) 

TAN

naoさんコメントありがとうございます。
たくさんいろんなmp3プレイヤーを紹介したなかでは、
淡い色使いとシンプルなデザインのDEWPLAYERが
いちばん気に入ってます。


by TAN (2008-07-30 21:23) 

ゆうき

質問です

google page creatorでhtmlを編集し終わった後updateしたら
<param name="movie" value="http://~プレイヤーのURL~/dewplayer.swf?file=http://~MP3のURL~/xxx.mp3">
だけが消えてしまいます。

previewではdewplayerはきちんと動いてるんですが、何か分かれば教えてください。
by ゆうき (2009-03-19 01:49) 

TAN

>ゆうきさん

sites.google.comでは埋め込みタグ(iframe,object,embed)は
制限で使えなくなっているので、google page creatorもおそらく
同じ制限があると思われます。

sites.google.comでもプレビューでは表示されましたが
更新ボタンを押すと警告メッセージが出てきて貼れませんでした。

by TAN (2009-03-19 02:36) 

ゆうき

返信ありがとうございます。

僕のOBさんがgoogle page creatorにdewplyerで音源をあげてたようなんですが他の方法があるのでしょうか?

後、警告などは何も出ずに前にコメントした部分だけ消えて<object ~>の部分は消えないんですが…
by ゆうき (2009-03-19 13:31) 

TAN

うまくいくかどうかわかりませんが、
試しに paramタグの末尾にある / を抜いて > だけにしてみてください。
それでダメなら
/ をぬいて > だけにして末尾に </param> を追加してみてください。

by TAN (2009-03-19 18:34) 

ゆうき

返信ありがとうございます。

試みたところ残念ながらできませんでしたが、もっといろいろ試してみます。

また何かあれば教えてください。

by ゆうき (2009-03-19 19:21) 

沖田

FLASH SINGLE MP3 PLAYERをブログに設置しようとしたんですが、
プレイヤーが表示されません><

fc2ブログを利用しているのですが、swf本体とmp3はfc2ホームページのスペースにアップロードしました。

タグは改行をなくし、万全だと思ったのですが・・・

URLに実際設置した記事へのリンクを貼りましたので、
みていただけないでしょうか><
by 沖田 (2009-03-24 01:50) 

TAN

>沖田さん
貼り付けたコードのURLの部分にサンプルコードが残ったままになっています。
プレイヤーのURLとmp3のURLのところをよく見てください。
両方とも2箇所ずつあるので見落とさないように注意。

落ち着いて見直せば分かるはずです。
by TAN (2009-03-24 02:15) 

沖田

ごめんなさい、つい見落としてしまいました><

しかし、しっかり全部記入しても表示されないのです><
今度こそ記入したので、もう一度見てもらえないでしょうか・・・orz
by 沖田 (2009-03-24 02:37) 

TAN

まだ余計な部分が残っています。
「/xxx.mp3」はサンプルコードの一部なので除いてください。

by TAN (2009-03-24 03:16) 

沖田

何度もすみませんorz

まったく気づいてませんでした><すみません・・・

ですが、「/xxx.mp3」が残っていた2箇所を修正しても、
プレイヤーが表示されません・・・

他のプレイヤーで試しても同じ症状でした。
また、ためしにブログではない通常のサイトに貼ったところ、
問題なく表示、再生されました。
ということはブログ側の仕様なのでしょうか・・・
by 沖田 (2009-03-24 11:06) 

TAN

余分な<br />が埋め込みタグの間に入っています。
改行をなくして埋め込みコードを1行にしてください。

(最初に見たときは入ってなかったような気が・・・)
by TAN (2009-03-24 13:09) 

沖田です・・・

百回くらいミスをしてしまい、もうしわけないです・・・
何度もやり直していたため、改行をなくすのを忘れていました><

こ・・・今度こそ・・・orz
いかがでしょうか・・・
by 沖田です・・・ (2009-03-24 17:16) 

TAN

沖田さん、ご苦労様でした(苦笑
ちゃんと表示されて再生もできましたよ[チョキ]
by TAN (2009-03-24 20:50) 

沖田

なぜかこちらだと何度やっても表示されなかったのですが、
swfの場所をfc2ホームページのスペースからブログの画像アップローダに移動したところ、ちゃんと表示されました!

今までファイルをFTPでサーバーに転送していたのですが、
公式のオンラインファイルマネージャなるものがいつの間にかできていて、
そこになぜかmp3ファイルが表示されていなかったのでアップロードしなおしました。
そしたら無事に表示、再生されました^^

環境によって微妙に差がでてしまうのでしょうか・・・

でも、今回は間違いなく再生されるようになりました^^
本当に何度も迷惑かけて申し訳なかったです><

今までyoutubeのmp3バージョンみたいなのを使って
ブログに貼り付けていたので、重くて仕方なかったんですが、
これで一気に軽くなりました!

ありがとうございましたm(_ _)m
by 沖田 (2009-03-25 12:44) 

tezz

わかりやすく書かれていたので、とても助かりました!
これからも参考にさせていただきます。ありがとうございます!
by tezz (2010-02-14 04:21) 

TAN

tezzさん、コメントありがとうございます。
記事中で書いてあることはできる限りフォローしますので
使い方などで分からないことがあったら気軽に聞いてくださいね。

by TAN (2010-02-14 21:39) 

penny

DEWPLAYERを使わせていただきました。私はWebサーバを借りているので、ブログのファイル容量を食わないこれには、丁度助かりました。ありがとうございました。
by penny (2010-02-28 15:48) 

TAN

pennyさん、コメントありがとうございます。
dewplayerは色使いとデザインが気に入っているので
このブログでもメインのmp3プレイヤーとして使ってます。
by TAN (2010-02-28 20:25) 

ken

とてもわかりやすい記事をありがとうございます。
FLASH SINGLE MP3 PLAYERを使わせていただいています。
まさに自分が探していたもので、ほんと感謝です。

プレイヤーをHPに使おうと思っているのですが、タグを記述して、プレイヤーは表示されるものの、肝心のMP3が再生されません・・・。
MP3のURL等は確認しており、間違い等ないはずなのですが・・・。

すみません、まだ製作途中のHPなのですが、良かったら見ていただけないでしょうか。URLにあります。
お忙しい中大変恐縮です。
by ken (2010-05-31 15:14) 

TAN

kenさん、はじめまして。
製作途中のHTMLを拝見しました。
objectタグの中に余計なスペースが4箇所入っています。

該当箇所↓(スペースを■で表してます)

~singlemp3player.swf?■file=~

~showDownload=true■">

swf に続く file パラメータの前(?と file の間)のところと、
最後の showDownload パラメータの true のすぐ後ろ(true と " の間)を
確認してみてください。

"object data=" と "param name="movie" value=" に2つずつあります。
(1曲当たり4箇所)
by TAN (2010-05-31 20:55) 

ken

素早い対応ありがとうございました。
おかげさまで無事再生でき、サイトも完成させることができました。
by ken (2010-06-02 18:10) 

u_2

 TANさんはじめまして、最近ホームページを開設しようと色々試している者です。

 落語のコンテンツを聞くことができるように「FLASH SINGLE MP3 PLAYER」をテスト中です。

 一括ダウンロードされることを避けるため、コンテンツをルート配下以外の、所におきPARLでSYSREADで読み込み「FLASH SINGLE MP3 PLAYER」に流し込むように考えています。

[呼び出し側]
print "<object type=\"application/x-shockwave-flash\" width=\"130\" height=\"20\" data=\"/singlemp3player.swf?file=/rakugodata.cgi?$para[0]/$para[1]\">\n";
print "<param name=\"movie\" value=\"/singlemp3player.swf?file=/rakugodata.cgi?$para[0]/$para[1]\" />\n";
print "<param name=\"wmode\" value=\"transparent\" />\n";
print "</object>\n";


[データ送信側:rakugodata.cgi]

$|=1; #オートフラッシュを設定
print "Content-Type: application/octet-stream\n\n";
if (!open(OUT,"$filename")) { &error(bad_file);}else
{
$length = 5000;
binmode (OUT);
binmode(STDOUT);
while (5000 eq $length)
{
$length = sysread OUT, $buf, 5000;
syswrite STDOUT, $buf, $length;
}
}
close(OUT);

上記コーディングで音は鳴ったのですが、インジケータが表示されず、異常終了することもあります。

正常に動作させる為には、データを送り込む前にファイルサイズ情報などを送る必要があるように思うのですが、何かご存じ無いでしょうか?

よろしくお願いします。

by u_2 (2010-06-14 20:15) 

TAN

u_2さん、はじめまして。
FLASH SINGLE MP3 PLAYERの再生ファイル指定は
おそらくそのような使い方は想定していないのだと思います。

多分なにかデータヘッダの情報が抜けているもしくは
プレイヤーが認識できていない状態と思われますが、
Perlはあまり詳しくないので細かいことはよく分かりません。

Content-typeを "application/octet-stream" ではなく
"audio/mp3" にしてみるのはどうでしょうか?

by TAN (2010-06-14 20:57) 

u_2

TANさん今晩は。
いろいろグーグって見たところ
https://www.codeblog.org/blog/inoue/20061120.html
に有用な記事があり、昨日の
[データ送信側:rakugodata.cgi]
を以下のように変更するとうまく動作しました。

$|=1; #オートフラッシュを設定

print "Content-Type: application/octet-stream\n";
print "Content-Length: $file_size \n\n";
if (!open(OUT,"$filename")) { &error(bad_file);}else
{       ~ 以降同じ
    
つまり「Content-Length: $file_size \n\n」のファイルサイズ情報をヘッダとデータの間に挿入すればOKでした。

どうもお騒がせしました。

by u_2 (2010-06-15 22:25) 

あっぷる

初めまして。mp3のFlashPalyerを検索していて、辿り着きました。
「DEWPLAYER」をDLして使わせて頂きました。
ですが、IEではちゃんと音が出るのですが、FireFoxでは、プレーヤーは表示されるものの、音だけが出ないのです。

FFでも音を出すには、どうしたら良いでしょうか?
お忙しいところ申し訳ないのですが、分かるようでしたら教えていただけますか? どうぞ宜しくお願い致します。
by あっぷる (2010-10-10 18:04) 

あっぷる

先ほど書き込みしました あっぷるです。
自己解決できました。お騒がせしまして、すみません。
書き込みを削除する方法が分かりませんでしたので、追記させていただきました。では失礼します。
by あっぷる (2010-10-10 18:55) 

TAN

あっぷるさん、はじめまして。
無事自力解決できたようでよかったです。
by TAN (2010-10-10 20:15) 

コメントを書く

名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 4

トラックバックの受付は締め切りました

iTunes Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac