2006年04月18日

埋め込む:del.icio.us/playtagger

例として、自作曲(の断片)。三角アイコンのクリックで再生開始。

130bpm64kbps.mp3(00:38)
128bpm64kbps.mp3(01:02)

音楽関連のブログなどを巡っていると、MP3ファイルへの直リンクとは別に、そのままページ上で再生できるプレイヤが埋め込まれていることがある。あれをやってみたくなった。

■Starfroschのちっこいプレイヤ

ネットレーベルのDJ MIXを再生するのにSeesaa提供のプレイヤを何度か使っている。今回書くのはそれとは別の、前から気になっていたプレイヤ。沢山のサイトを見て回っているわけではないが、僕の知る限り埋め込み型プレイヤのベストは、Starfroschで使われているやつだ。

とりあえず表示されるのは、MP3への直リンクの横にある小さい三角ボタンだけ。このボタンをクリックすると、これまた小さいFlashプレイヤがボタンの隣に現れてデータをロードしつつ再生を始める。こんな感じ→starfrosch_playing.gif

もう一度ボタンを押すか、同じページ上にある他の曲のボタンをクリックするとストップ。“playing”を押すと表示が“paused”になって一時停止する。再開は“paused”をクリック。曲が終わると“playing”が“finished”に変わる。

以上。これだけ。他にプレイヤとしての機能はない。
横には直リンクもあるわけだし、単純な再生以外に何かしたければ他のソフトで開くなりダウンロードなりすればいいじゃんという姿勢が反映された(?)、小さいうえに機能も最小限でシンプルなプレイヤ。大好き。


■プレイヤの正体、設置と機能

実はこのMP3プレイヤはStarfroschオリジナルではなく、del.icio.usというふざけた(?)ドメインのサイトが提供しているサービスを、ちょっぴりカスタマイズして使っているのだった。

del.icio.us / help / playtagger
We rock (part 2)(del.icio.us/blog 2005/11/22)

このサービスは無料で提供されており、特にユーザ登録などをしなくても使うことができる。
del.icio.usはソーシャルブックマーク・サイトで、このプレイヤはそのサービスの中のひとつだ。プレイヤには、“tag this”をクリックすることで再生中のMP3ファイルにタグをつけるという機能もある。だから“playtagger”。

playtaggerをページに埋め込むには、HTMLに次の1行を加えるだけでいい。Javascriptだからheadタグ内かと思いきや、説明には「どこでもいい」と書いてある。実際、bodyタグ内に書き込んでも動いた(けど、head内に書く方がいいような気がする)。

<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>

つまりこのちっちゃいプレイヤは単純にFlashメイドのMP3プレイヤではなく、Javascriptを使ってちょっぴりひねりを効かせている。そもそもプレイヤの貼り付けられたHTMLのソースを見てみると、普通のテキストのリンクしかない。ボタンの表示が記述されてないのだ。

たぶんこういう仕組み。
→Javascriptでページ内のリンク(aタグ)をチェックし、.mp3で終わるURLの場合だけgifファイルの再生ボタンをimgタグで表示する。再生ボタンが押されたら(onClick)、Flashのプレイヤを表示してロード&プレイ。MP3ファイルの場所は(文字色とともに)変数として“FlashVars”というパラメータでプレイヤに渡される。たぶん。これなら僕が使っているSeesaaでも同じことができるはずだ。たぶん。


■問題点とカスタマイズ

パラメータ等を指定することなく1行を書き加えればいいというのは、とにかく手軽だ。

HTMLにMP3ファイルへのリンクを書いておけば、Javascriptが勝手にプレイヤを埋め込んでくれるので、Starfroschのようなサイトにはぴったりの仕様だろう。

逆にいうと、プレイヤを付けたくないMP3へのリンクがあったとしても回避することはできない。例えばページ上に複数のMP3へのリンクがあり、その中のひとつだけにplaytaggerを付けたいのであれば、playtaggerのJavascriptをページ上で一切使わずに、本来Javascriptが生成するであろうHTMLを手で記述するという方法もあるかもしれない(試してない)。

また「Lucky bag::blog」のエントリにも書かれているように、ボタンのGIFもFlashもJavascriptもdel.icio.usに置かれているので、サーバにつながらなければアウトになってしまう。環境が許すのであれば、全てのデータを自分のサーバにアップロードするというStarfroschやLucky bag::blogさんのやり方が賢明だろう(ちなみにStarfroschは、ボタンのデザインをオリジナルとは変えている)。このブログで使っているSeesaaは、それらのファイルを全てアップロードできる。headタグ内にJavascriptを入れることも可能。まだやってないけど、その際にはJavascriptの書き換えが必要だ。

続く。


■参考ページ
JavaScriptでDOMを使う――オブジェクト指向入門の入門(outsider reflex)
del.icio.us の playtagger で mp3 ファイルに再生ボタンLucky bag::blog 2005/11/23)
FLASH MP3プレーヤー紹介・パート2「FLASH SINGLE MP3 PLAYER」「del.icio.usの"Play Tagger"」YOKOHAMA BLUE RADiO 2006/02/10)
 →MT・Bloggerユーザに捧げるMP3フラッシュプレーヤー(同上 2005/09/25)


posted by 犬TV at 20:12 | Comment(0) | TrackBack(0) | WEB - TECH
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。