2011年09月16日

お手軽インライン・プレイヤー Yahoo webPlayer

インライン・プレイヤー

 Webページで音楽とか動画を配信したりするとき、インライン・プレイヤーを使うと便利だ。
 通常であれば、mp3 とかに <a> タグを使ってリンクして、クリックしたらプレイヤーのページ(インストールしてあるプラグインによる)が開くのだけど、インライン・プレイヤーならその場で再生することができる。YouTube の embeded プレイヤーとかは有名でよく使われているが、音楽用のプレイヤーでこれという決定打を見つけられないでいた。
 これまで、いろんなプレイヤーを使ってきたが、flash を利用するものが多く、flash がない場合用のリンクを別途用意したり、プレイヤーの画像が大きすぎていまいちだったりした。
 この度、あらたに配信用ページを作成するにあたり改めて探してみたら、いいものを見つけた。
 Yahoo webPlayer である。
 使い方は至って簡単、しかも見た目もすっきりとしていて、まさに探し求めていたもの、そのものだったのだ。

Yahoo webPlayer

Yahoo webPlayer

 導入は至って簡単。以下のコードを HTML に加えるだけだ。
<script type="text/javascript"> var YWPParams = { autoadvance: false }; </script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>
 あとは、<a> タグを使ってリンクを張るだけで、そこに インライン・プレイヤーを配置してくれる。
 YWPParams にいろんなパラメータを指定可能で、カスタマイズできるようになっている。くわしい設定方法は、How to Setup ページで調べて欲しい。
 ここでは "autoadvance:false" として、次々と自動的に再生しないようにしてある。これはデフォルトで true なので、連続再生させたくない場合は false に設定しておこう。

 このプレイヤー、このベージに導入しているので、参考までに以下を見て欲しい。
 と、書くだけで、  となる。
 リンクの直前に マークが自動的に挿入される。これがプレイヤーだ。クリックすると再生が開始する。もう一度クリックすると停止する。
 また、ブラウザ画面左下に flash プレイヤーがタブに折りたたまれていて、タブの三角をクリックするとプレイヤーがでてくる。
 ベージ内の全てのリンクをプレイリストとして使えるのも便利だ。
 さらに、YouTube などの動画にも対応している。

カテゴリビュワーで見ていると、このサンプルが正しく動作しない可能性があります。
プレイヤーがうまく表示されない場合は こちら でお試しください。

特に気に入っている点は
  • インラインのプレイヤーがシンプルでいい(1文字分程度のサイズ)
  • 他の曲を再生すると現在のものが停止してくれる(これが出来ないものが多い)
  • ページ表示時の負荷が軽い
  • flash がない場合も、通常のリンクとして動作する
というあたりかな。

 とにかく、見た目がよくて、機能がよくて、軽い、と三拍子そろったおすすめのプレイヤーです。

是非、おためしあれ


※サンプル音源には sionsiva さんのサイトからデータをお借りしました。
The World of SIONSIVA


posted by tekniq at 20:02 | Comment(0) | TrackBack(0) | HTML/css/php/perl/javascript