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

米Yahoo!が埋め込みMP3プレイヤーを公開 : Yahoo! Media Player
» 音楽系ブログパーツ 

米Yahoo! が 1/8 (米国時間)に Yahoo! Developer Network 公式ブログ で 1行の JavaScript を組み込むだけで簡単に呼び出せる Yahoo! Media Player を公開開始していました。

 ブログの記事中などのアンカータグ(リンク)に指定されている MP3 ファイルの URL を自動的に探し出して、プレイヤーのプレイリストに登録してくれるというものです。
 プレイヤー本体はページの左下にオーバレイで表示されます。



 細かい部分がチェックしきれていないので若干中途半端ではありますが、設置方法とあわせて紹介します。

設置方法(前準備)

 再生する曲の URL をアンカー(A)タグに指定します。

<a href="http://~/sample.mp3">サンプル曲</a>

 A タグで囲ったテキスト以外に曲のタイトル名を付けたい場合は title 属性を追加します。

<a href="http://~/sample.mp3" title="曲名とか" >サンプル曲</a>

 画像を指定した img タグをアンカータグで囲むと画像がアートワークとしてプレイヤー部に表示されます。記事中に表示したくないときはスタイルに display:none を指定します。

<a href="http://~/sample.mp3" title="曲名とか" ><img src="画像URL" />サンプル曲</a>
<a href="http://~/sample.mp3" title="曲名とか" ><img src="画像URL" style="display:none" />サンプル曲</a>

 このほかにも、アンカータグに MP3 ファイルが設定されている外部のページの URL を指定したり、XSPF 形式で作ったプレイリストを指定することもできます。
 XSPF プレイリストを使うと曲名以外にアーティスト名やアルバム名、アートワーク(画像)をプレイヤー部に表示することができます。詳しくは Yahoo! Media Player public wiki の How To Link で説明されているので、(英語ですが)一読しておくことをおすすめします。

 プレイリストの曲順は基本的にはページの先頭から検索された順に追加されていきますが、任意の曲順にしたい場合は属性の tabindex で曲番号を指定します。

<a href="http://~/sample.mp3" title="曲名とか" tabindex="1" >サンプル曲</a>

設置方法


<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

 前準備ができたら、上記の JavaScript コードを埋め込みます。特定の記事に埋め込むとその記事の MP3 ファイルだけが再生対象になりますが、ブログのトップページで複数の記事が表示されたりする場合は、表示されている記事をまたいで全ての MP3 のリンクが再生対象になって余計な曲まで再生されてしまうので注意が必要です。

設置例

有効な MP3 ファイルのリンクには左端に小さな再生ボタンが付きます。
あわせてページの左下にオーバレイ表示されたプレイヤーが表示されます。

 音楽方丈記サンプル曲

 埋め込むコードは JavaScript だけですが、フラッシュで作られたプレイヤーが内部で間接的に呼び出されて再生を受け持っていると思われます。(オーバレイ表示されているプレイヤーの GUI 部分はフラッシュではないようです)

 上の例のように記事中の MP3 リンクを直接指定するよりも、XSPF のプレイリストを作ってやったほうが多少手間は増えますが使い勝手的にはよいかもしれません。
 オーバレイ表示されるプレイヤーの位置やデザインも含めて好みが分かれそうな仕様ですね。



[追記] 2009/07/19 - Easylistener は現在利用できなくなっています

 ついでに去年の11月に先に公開されているオーソドックスな embed タグを使う埋め込みフラッシュ MP3 プレイヤー Easylistener もあわせて紹介します。



 公式ブログ内に貼り付けウィザードが公開されていて、こちらも簡単に利用することができます。1曲単位の再生から、XSPF/M3U/ASX 形式のプレイリスト対応したり、RSS フィードや外部 Web ページ上にある MP3 リンクでプレイリストが作れたりと、柔軟なプレイリストを作ることができます。

 プレイヤーの外観は Normal、Tall、Thick Bar、Bar、Mini の5種類が用意されていて、カラーも若干ですがカスタマイズできます。

 プレイリストの指定の方法さえ理解すれば、コードの埋め込み方法や使い勝手は一般的な埋め込み MP3 プレイヤーと大差ないので、こっちのほうがサイトを訪れた人には使い方を理解してもらいやすいかもしれません。

[関連サイト]
 Yahoo! Developer Network 公式ブログ
 Yahoo! Media Player
 Yahoo! Media Player public wiki
 Yahoo! Easylistener
 XSPF

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


» スポンサーリンク
DMR

サウンドハウス


nice! 0

コメント 7

秀

参考にさせていただきました。[__わーい]
by (2009-04-09 22:26) 

TAN

秀さん、はじめまして。
参考にして頂きありがとうございます[ニコニコ]
動きがおかしいところとか質問とかあったら気軽に聞いてください。
by TAN (2009-04-10 02:46) 

龍馬

この[__るんるん]プレーヤータグもう使えないのかな[__バッド]プレーヤーでてこないし・・・・[__!?]

by 龍馬 (2010-08-22 06:23) 

TAN

1つ目のプレイヤーは使えますよ。(ここでも使ってますし)
scriptタグを組み込んでプレイヤーが出てこないなら、使い方を間違っているか、もしくはブログのシステムがscriptタグを禁止しているか、何か原因があると思います。

2つ目のEasylistenerは公開が中止されてしまったので、残念ながら今は使えません。
by TAN (2010-08-22 07:30) 

龍馬

<script type="text/javascript" src=http://mediaplayer.yahoo.com/js"></script>
これプレーヤーでません
YAHOOJPのホームページにはこのタグ対応してないのかな・・[__!!]





by 龍馬 (2010-08-22 09:18) 

TAN

>YAHOOJPのホームページにはこのタグ対応してないのかな

Yahooブログのことですか?

Yahooブログはユーザが貼り付けたJavaScriptのコードは無効になるらしいです。
(使ったことないので詳しいことは知りません)
by TAN (2010-08-22 20:46) 

龍馬

Yahooブログはユーザが貼り付けたJavaScriptのコードは無効になるらしいです・・・

[__!!]そうだったんだ プレイヤー使えると思ってブログはじめたのに・・・[__爆弾]Yahooなんてもう放置だ~(笑)・・・

でも自分の運営サイトで設置できたから[__揺れるハート]OK...
Yahooブログのせいで寝不足です・・・
[__ひらめき]情報ありがとうございました、自分のサイトでフルに使わせてもらいます、
by 龍馬 (2010-08-22 22:02) 

コメントを書く

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

Facebook コメント

トラックバック 1

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

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





for iPhone/iPod touch





for Mac





customizeBlog2(); //]]>