1. HOME
  2. 開発・ブログ運営
  3. JavaScript
  4. 簡単に YouTube や mp3 を再生できる Yahoo! WebPlayer の使い方
2014年09月23日
CSS と Javascript の読み込み順序を変えてみた ...
2012年08月17日
JQueryで音楽再生が出来る格好いいテンプレートを見つけた ...
2015年08月13日
git で簡単バックアップしてみる
2015年06月08日
Masonry + imagesLoaded でタイル状に要素 ...
2012年05月05日
簡単に YouTube や mp3 を再生できる Yahoo! ...
2014年08月23日
これは便利!簡単に WEB 表示速度が測定出来るブックマークレ ...

簡単に YouTube や mp3 を再生できる Yahoo! WebPlayer の使い方

Web サイトで MP3 を再生したり YouTube 動画を再生する時に簡単に導入できる Yahoo! WebPlayer の導入方法を紹介します。

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ドキュメントをご覧ください。

でわでわ。






この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.