Yahoo! WebPlayer は、iTunes ミュージック検索 & ブログ用タグ生成ツールで曲を視聴するために利用しています。
Yahoo! WebPlayer は Flush を利用した 動画や音楽ファイルを再生するためのプレーヤーで、無料で利用する事ができます。
Yahoo! WebPlayer の実装は簡単で、<body></body>の中に、
（ブラックにする場合）
<script type=”text/javascript” src=”http://webplayer.yahooapis.com/player.js”></script>
（グレーにする場合）
<script type=”text/javascript”> var YWPParams = { theme: “silver” }; </script> <script type=”text/javascript” src=”http://webplayer.yahooapis.com/player.js”></script>
を追加するだけです。この1行を追加すると、<body></body>の中にある、mp3 などメディアファイルへのリンクを勝手に抽出しプレイリストにまとめてくれます。
正しくYahoo! WebPlayer が動いていれば、ブラウザの左下に、
のようなタブが表示されます。タブをクリックすると、
のびます。
あとは特に説明は必要ないと思いますが、
をクリックするとプレイリストが表示されます。
プレイリストの表示方法を変えてみる
プレイリストには再生している曲名とイメージ画像が表示されます。
曲名は、メディアファイルへのリンク（<a>タグ）内のテキストが曲名として使われます。
<a href=”http://….mp3″>ここが曲名</a>
ただ、これだと使い勝手が悪いので、<a>タグに title 属性を追加する事で曲名を自由に設定できます。
<a href=”http://….mp3″ title=”ここが曲名”>視聴する</a>
イメージ画像はデフォルトでは何も表示されません。イメージ画像を追加するためには、メディアファイルへのリンク（<a>）タグ内に <img> タグを追加します。
<a href=”http://….mp3″ title=”ここが曲名”> <img=”ここがイメージ画像のURL” />視聴する</a>
そうするとイメージ画像が表示されます。このままだとブラウザ上に画像が表示されてしまうので、
<a href=”http://….mp3″ title=”ここが曲名”> <img=”ここがイメージ画像のURL” style=”display:none”/>視聴する</a>
とすれば表示されなくなります。
その他にも、Yahoo! WebPlayer で抽出してほしくない（再生したくない）メディアファイルへのリンクには class=”noplay” を追加することで対象外としたり、プレイリストの順序（ tabindex 属性 ）を指定したりすることができます。
詳しくは、Yahoo! WebPlayer のドキュメントをご覧ください。
でわでわ。
