ブログで使える埋め込みフラッシュMP3プレイヤー (その7)

	ブログをはじめるログイン

Twitter 人気記事

はてなブックマーク人気記事

インド系エレクトロニックミュージックコミ.. ｜南極の海中の音をストリーミングで聴く :..

ブログで使える埋め込みフラッシュMP3プレイヤー (その7)
» 音楽系ブログパーツ　 [編集]

あけましておめでとうございます。
本年も音楽方丈記をよろしくお願いします。

新年一発目は恒例(？)のシンプルな埋め込みフラッシュプレイヤー紹介の第7弾です。
今回は Hideout XSPF Web Music Player のボタン型プレイヤーを紹介。
　

使用例

プレイヤーのダウンロード

　まず XSPF の SourceForge サイトから、圧縮ファイル button_player-0.1.zip をダウンロードします。解凍したフォルダの中にある musicplayer.swf がプレイヤー本体です。他のファイルは捨ててしまってかまいません。

プレイリストファイルの準備

　今回のプレイヤーは XSPF 形式のプレイリストに対応しているので、プレイヤー本体ファイルと再生する MP3 ファイル以外に XSPF 形式のプレイリストファイル(拡張子は .xspf 推奨)を作成する必要があります。XSPF フォーマットの詳しい仕様はこちらで確認してください。

　プレイリストファイル(XSPFファイル)の作成例

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track><location>http://～sample.mp3</location></track>
</trackList>
</playlist>

　(複数曲の場合は <track>～</track> の部分を増やしてください)

設置方法

　各ファイルを任意の Web サーバにアップロードします。ブログサーバに置けない場合は別の Web サーバにアップロードする必要があります (直接ファイルにアクセスできないオンラインストレージは不可)
　プレイヤー本体 (SWF) と MP3 ファイル、プレイリスト(XSPF) は別のサーバにおいても構いません。

　上記のコードをブログに貼り付けます。プレイヤーの色の変更はできません。サイズは 17 x 17 ピクセル固定です。

　各ファイルの URL (反転部分)は各自のものに変更してください。記事の入力欄の見た目に合わせて自動的に改行タグ(<BR/>)が挿入されるブログは、貼り付けコードの改行をなくして1行にまとめて貼り付けてください。

[追記] 2009/05/24

ポップアップメニューの項目を減らしたバージョン

　ソースコードが付いていたので、プレイヤーを右クリックしたときに表示されるポップアップメニューの「Download」と「Add song to Webjay playlist」がないバージョンを作ってみました。

　右クリックの「対象をファイルに保存」でダウンロード→ musicplayer_011.swf

　実行サンプル

[追記] 2009/10/07

ポップアップメニューの項目を減らしたバージョン (その2)

　ボタンタイプといっしょに公開されている Slim タイプと Extended タイプでポップアップメニューの「Download」と「Add song to Webjay playlist」がないバージョンも作ってみました。右クリックの「対象をファイルに保存」でダウンロードしてください。

　Slim タイプ　→xspf_player_slim.swf
　Extended タイプ　→xspf_player.swf

[関連サイト]
　Hideout XSPF Web Music Player (musicplayer.sourceforge.net)
　xspf XML Shareable Playlist Format Home (www.xspf.org)

2008-01-01 20:17 nice!(0) コメント(25) トラックバック(2) 　»　カテゴリー：音楽系ブログパーツ

nice! 0

あけましておめでとうございます。
いつも、細かいところまでカバーしていただいているこのブログに、
大変助かっております。本当にありがとうございます。
今後とも、お体に気をつけて頑張って下さい。
by ななしです (2008-01-06 01:29)

こちらこそ、いつもアクセスありがとうございます。
今年も地味でマニアックに更新がんばります。
by TAN (2008-01-06 18:59)

いろいろな方法を紹介していただき助かります。
今回の XSPF Web Music Player のボタン型プレイヤーで１つのページに３つのボタンを設置したところ、もともとの３つのmp3ファイルでは全く問題ないのに、Web上でボタンを押して再生すると、２つ目のファイルは少し、３つ目のファイルはもっと、バリバリという雑音が入ります。
Play Tagger で試しても、同様になります。
どうしてでしょうか？
試しにXSPF Web Music Player 方式で３つ目のファイルを１つだけ他のページに設置してみても、同様の雑音が入ります。
もとのmp3ファイルでは全く雑音は入っていないのですが、試しに音量を70%に落としたファイルを作り直してみても改善されません。。。

by ケムンパス (2009-02-13 16:32)

＞ケムンパスさん

原因はよく分かりませんが、
mp3ファイルが44.1kHz、22kHz以外や16bit以外だと
正常に再生できないかもしれません。
by TAN (2009-02-13 22:34)

ありがとうございます！
mp3ファイルが48kHz、16bitだったので、44.1kHz、16bitに変換したところ、不具合が解消しました。
by ケムンパス (2009-02-15 16:39)

やはりそうでしたか。
解決してなによりでした。

その制限はFlashのAPIによるものなので他のプレイヤーでも同じ結果になると思います。
(今後の仕様変更・機能変更で変わる場合もあり)
by TAN (2009-02-16 20:21)

始めまして。
自分は音楽ｸﾞﾙｰﾌﾟでﾎｰﾑﾍﾟｰｼﾞを担当させていただいている山本といいます。
ﾎｰﾑﾍﾟｰｼﾞの作り方など、全くわからず、でも、まずは音楽を流したいと思い調べていたところこのﾌﾞﾛｸﾞへとたどり着きました。
数々のツールをあげていただいて本当に助かりましたので、この場を借りるのはどうかと思ったのですが、御礼を申し上げたく思います。
ありがとうございました。
http://www.ajisairecordings.comですので、よければ一度みてください。
周りに詳しい方などもいなく、とりあえず形にはしてみましたが、どうかなと思いましたので。。。

本当にありがとうございました。
by 山本　典史 (2009-02-17 01:42)

＞山本さん
参考にしていただきありがとうございます。

Easy Musicplayer (silk button)を使っておられるようなので
少しだけアドバイスを。
ページ背景が白以外の場合は、objectタグの中にあるparamタグで

<param name="wmode" value="transparent" />

を追加してやるとボタンの余白が透過になります。
試してみてください。
by TAN (2009-02-17 02:30)

こんにちは。
このプレイヤーさっそく試してみたのですが
イイ感じですね。

で、１つ質問なのですが、右クリックで出てくる
「Download」と「Add song to Webjay Playlist」のメニューを消す方法とかあるんですかね？

よろしくお願いします。
by たむらん (2009-05-24 16:50)

たむらんさん、はじめまして。
調べてみたところ、その2つのメニューを消すオプションはないようです。

ソースコードが付いていたのでちょこっと改造して
2つの項目を消したバージョンを作ってみました。
よかったら使ってください。
by TAN (2009-05-24 18:55)

おお、メニューが消えてます。
素晴らしいです。
ありがとうございます！
by たむらん (2009-05-24 21:39)

はじめまして。
初心者の私にもとてもわかりやすく、かっこいいデザインなので是非とも使わせていただきたいのですが、少々困っております。
FC2ブログなのですが、記事を書きながら見れるリアルタイムプレビューではしっかり再生できるのに、新しいページでプレビューしたあとや、実際に投稿したあとに再生できなくなります。。。
ちなみにFC2WEBホームページスペースにSWFファイルとmp3ファイルを置いています。
よろしくお願いします。

by 君しま (2009-05-25 04:58)

君しまさん、はじめまして。

まず、ブログに書いたプレイヤーとmp3のURLや埋め込みタグの
打ち間違いがないか再確認してください。

その後にfc2のホームページスペースに置いたmp3とswfを
それぞれ別々にURLをブラウザのURLアドレス欄に入れて
単独でアクセスできているか確認してみてください。
(このときのswfは再生ではなく表示されるかだけ確認してください)

実際に設置したページを見せてもらえれば
もう少し詳しくアドバイスできるかもしれません。
by TAN (2009-05-25 09:54)

恐れ入ります。こちらになります。

ちなみに、mp3もswfもアクセスできているようですが・・・

よろしくお願いします。
by 君しま (2009-05-25 11:22)

>君しまさん
ブログ拝見しました。
貼り付けたコードの間に余分な改行(BR)タグが間に入っています。

おそらくブログのシステムが見た目に合わせて自動的に挿入していると思われるので、
<object>　～ </object> の間を改行せずに1行にしてみてください。
by TAN (2009-05-25 11:52)

お世話になります。
改行タグをすべて消し、実際にブログのページからソース表示でも確認しましたが、やはり再生できません。プレイヤーが表示されませんね。。。

色々実験していましたが、実際にswfとmp3を設置したページを確認した直後には、再生できるという、不思議な現象がおきました。

たびたびすいません。
by 君しま (2009-05-25 12:15)

今のコードそのものはとくに問題ないようです。
こちらで単独でコードを試したところちゃんと再生できました。

あと、IE8、Firefox3で君しまさんのブログを見るとプレイヤーが
出てきませんが、Safari3で見ると出てきて再生できました。

原因はまだ分かりませんが、fc2のHPスペースのほうに
html以外のファイル(swfやmp3や画像)を
外部から直リンクをさせないような何か制限があるのかもしれません。
by TAN (2009-05-25 12:51)

大変ご丁寧にありがとうございます！
私ももっと勉強しようと思います。

まずはちがうサーバーにアップして確認してみます。
（ちなみに忍者もダメでした・・・）

本当にありがとうございました！
by 君しま (2009-05-25 13:00)

はじめまして。貴殿のブログを、他の方からご紹介いただき、アクセスいたします。周りにためしたことがある人が皆無のため質問させていただきます。
当方、音楽コンテンツをxspfファイルにしたくてあくせくしておりますです。
ジェネレーターと呼ばれるものでつくってみました。
http://emff.sourceforge.net/playlistgenerator/
上記のグレー部分に入る形でプレイリストをつくり、xspfの拡張子で保存し、サーバーにアップしました・・・が、MP３は再生されません。

IEなどで開くと、タグが普通に見えるだけです。
サーバーにはＭｉｍｅなどは設定しておりませんが、このxspfを有効化するためには必要なのでしょうか。
またdurationｔは設定しておりません。
私の認識がきっと未熟で再生できていないのだとおもいますが、
どのようにしたらMP３が続けて再生できるでしょうか。

またこれを携帯でも再生できるようにしたいとおもっていますが、
どんなことに気をつけたらよいのか教えていただけませんでしょうか。

漠然とした質問で申し訳ありません。宜しくお願いいたします。
makiko0107@gmail.com
by まきこ (2009-05-25 13:49)

まきこさん、はじめまして。

記事で紹介しているようなWeb上のFlashプレイヤーではなくて、
クライアントPCにある音楽プレイヤーでXSPFファイル経由で
mp3を再生したいということでしょうか？

ブラウザからXSPFに直接アクセスして内容がテキストでそのまま
みえてしまうのはMIMEが設定されていないからだと思います。
XSPFのMIMEは application/xspf+xml です。

あと、サーバ側にMIMEが正しく設定されていたとしても
クライアント側にXSPF形式プレイリストに対応したプレイヤーが
インストールされていないと再生できません。
ユーザが多いiTunes、WindowsMedia Player、WinAmpは
標準ではXSPF形式のプレイリストには対応していなかったと思います。

ケータイについても同様です。
by TAN (2009-05-25 21:12)

こんにちは。
このプレイヤー、クールでいいですね。

私はSlimタイプExtendedタイプを使おうかと考えてるんですが、これにも「Download」と「Add song to Webjay Playlist」が・・。
(しかも、Webjayのサイト自体がもう無いのか、私のところからはアクセスもできないようで)

他力本願で申し訳ないんですが、他の2タイプの「Download」等が無のも作成していただけたら、嬉しいです。
よろしくお願いします。

by 深川 (2009-10-07 11:48)