2008 . 02 . 10
Yahoo! Media Player - 使い勝手のよいWEB用のMP3プレーヤー
Yahoo! Media Player
ブラウザ上で動作するMP3プレーヤーは多く存在しますが、設置が簡単で、それでいて汎用性に優れたものはあまりないような気がします。
プレイリストが読み込めて、連続再生が可能なもので有名なところでは、JW FLV MEDIA PLAYERや、XSPF Web Music Playerなどが挙げられるでしょうが、今回はもっと設置が簡単で手軽に使えるYahoo! Media Playerを紹介します。
Yahoo! Media PlayerはJavaScriptベースのMP3プレーヤーで、実行するには、まずWebページ内にこのスクリプトを呼び込むために以下のコードを記述しておきます。
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
上のような単一のMP3ファイルだけでなく、プレイリストファイル(XSPF)の読み込みも可能です。その場合には以下のようにMP3ファイルの代わりにプレイリストのURLと、そして「type="application/xspf+xml"」の属性を追加してやります。
<a href="http://api.jamendo.com/get/track/id/album/audio/xspf/1289/?aue=mp31" type="application/xspf+xml">HYPE - Lies and Speeches</a>
プレイリスト(XSPF)の場合はアルバムアートや演奏時間その他のメタデータも自動で読み込まれ表示されます。
デモページでご覧のように、プレーヤーは左下に小さく現れ、記事中心のページなどでも邪魔にならない一方、メディア中心のページではウィンドウを開いてプレイリストなどの情報を表示したり、フレキシブルなデザインになっています。
さらにもう1つ、Yahoo!ではFlashベースの埋め込み型MP3プレーヤーも提供しています。
こちらもプレイリストの読み込みが可能で、同サイト内に用意されたフォームにプレイリストのURLやサイズ、色、タイプなどを入力すれば簡単に埋め込み用コードを生成することができ、あとはそれをページに貼り付けるだけでOKです。
さて、ここまではブログやHPを作る側にとっての情報でしたが、閲覧者サイドにもとても便利なハックがあります。
それは、先のYahoo! Media Playerのスクリプトをブックマークレット経由で使ってしまうというものです。
つまりブックマークレットを使って、任意のページ内でYahoo! Media Playerが動作可能な状態にしてしまう訳です。
上のデモページは、単にMP3ファイルにリンクされた文字列のリストですが、下部のボタン「Y!player」をクリックするとデモページ1のようにプレーヤーが実装されたページに早変わりします。
これは下のような一行のJavaScriptで、ブックマークレットとしてお気に入りに登録しておき、任意のページ上でクリックして動作させることができます。
javascript:(function(){var start = function(){YAHOO.music.WebPlayer.asyncLoadPlayer()};var script = document.createElement('script');script.src = 'http://mediaplayer.yahoo.com/js';if(script.addEventListener){script.addEventListener('load', start, false);} else{script.onreadystatechange = function(){if(this.readyState=='complete'){ start(); script = null;} }}script.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(script);})();
ブックマークレット » Y!player
以前紹介したブックマークレットで「PlayTagger」というのがありましたが、「Y!player」は連続再生可能という点でもさらに秀逸なハックです。
Googleのオープンディレクトリ ハックで検索したインデックスページをさらにブックマークレットでジュークボックス化してしまうという荒技も
さて、デザイン的には好みの分かれるところでしょうが、少なくともマズいレベルではないように思います。とくに、「記事内にちょっと音声を挿入してみる」的な使い方でも、「音楽だけのジュークボックス」的なページ上での使用にも、どちらでも対応できるところなどはよく考えられているのではないでしょうか。
そして何より、このパフォーマンスでコレだけ簡単に設置できるMP3プレーヤーは今のところ他に見当たらないように思います。
それにしても、Yahoo!のデベロッパー向けツールはGoogleのそれに比べ消極的？なせいか、あまり目立たずに取り上げているところも少ないないのが現状。質がよいだけに、流行らず消えていってしまうのは惜しいツールです。
[参考資料]
Yahoo! Media Player
Yahoo! Media Player public wiki
MP3 player from Yahoo! - bookmarklet
[使用した音楽素材]
Jamendo : Lies and Speeches by HYPE
☆レッチリが好きな方にはオススメ☆
#2
2013 . 03 . 31 01 : 27 AM
追加です。
連続再生とは無限に繰り返して再生するという意味です。
今のコードですとプレイリストを１回再生して終了してしまいます。
（Y! Webplaymerと表示されます。）
やりたいことは、プレイリストに１０個あれば、全部を繰り返し再生させるにはどうすればいいかということです。
検索でこのサイトにたどり着き、感謝です。
#3
2013 . 03 . 31 11 : 31 AM
ちなみにこちらの『Yahoo! Media Player』は2011年に『Yahoo! WebPlayer』に変更されました。
旧コードでも自動的に新しいプレーヤーが呼び出されるようなので使用上問題はありませんが・・・。
ご質問のリピート再生に関しては、残念ながらそのようなオプション機能は実装されていないようです。
（ドキュメント参照）
#4
2013 . 03 . 31 12 : 26 PM
すばやいご返事、ありがとうございます。
できたらYahoo Webplayerに仕様追加要請をしたいと思います。
実際には、無限繰り返しで聞きたいことが多いので。
これは便利で、いいプレーヤーです。
ブックマークレット ? Y!player で、
プレイリストを連続再生させるにはどのようにコードを修正したらいいでしょうか？