米Yahoo!の「1行追加でOKなMP3プレーヤー」を試してみた
一昨日、ITmedia Newsで米Yahoo!、1行追加するだけで使えるMP3プレーヤー公開を見て、おおーと思ったのでちょっと試してみました。
.mp3ファイルへのリンクと、Yahooにあるjavascriptへのリンクが必要なので、実際には最低でも2行必要ですね。
下の矢印マークをクリックすると曲が流れます。曲はフリー音楽素材を配布しておられるSam Free Musicさまのものを使用させていただきました。ありがとうございます！
ちなみに文字をクリックするとリンク先のmp3ファイルそのもの、プレイリストを使った場合（※後述）は、プレイリストが開きます…当たり前ですが。
さて、やりかたはすごく簡単。
Yahoo Music Playerの使い方
1.javascriptへのリンクを貼る
2.mp3へのリンクを貼る
これだけ。javascriptへのリンクは、body内に置いても、head内でも、mp3のリンクへの上でも下でも動作するようです。
リンクは、上のコードだとこんなふうに見えます。
プレイヤーはこんな感じ。
(てかこのページに実物があるのでスクリーンショットいらなかったような…）。
右の三角をクリックでタイトル等が出ます。
プレイヤー内の文字をクリックすると、その文字のYahooでの検索結果に飛びます。
さらに、たためちゃったり。
複数のmp3にリンクが貼ってあると、勝手にプレイリストにしてくれます。
Yahoo Music Player 応用編
さらにつっこんで見てみると、こんなことができるようです。
■タブインデックスで、プレイリストの順番を変える
たとえばこんなふうに書いた場合
<a href="example2.mp3" tabindex="1">1曲目</a>
1曲目のリンクの方が下にあっても、プレイヤーでは1曲目になります。
■タイトルをリンクの文字と違うものにする
たとえばこう書くと
リンクは「私の好きな曲」と表示されて、プレイリストにはタイトルで指定したタイトルが表示されます。
■アルバムイメージを表示する
mp3へのリンクを貼った<a>タグのなかにイメージを置くと、プレイヤーに反映されます。
リンクはこんな感じに。
イメージはpngでもjpg、gifでもOKでした。
リンクにはイメージを表示したくないときは、CSSでdisplay:noneを指定すればOK。
■アルバムイメージ、アルバムタイトル、アーティスト名を表示する
プレイリストに特化したXSPFという形式があるみたいなんですが（知らなかった）、それを書いてやるとアルバムタイトルやアーティスト名も表示されます。XSPFの書式はとても簡単です（中身は普通のxmlです）。こんな感じ。
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<location>http://example.com/song.mp3</location>
<title>曲名</title>
<creator>アーティスト名</creator>
<album>アルバムタイトル</album>
<image>http://example.com/art.jpg</image>
</track>
</trackList>
</playlist>
複数の曲のプレイリストにしたいときは<track>〜</track>を曲数分書けばOK。これをメモ帳かなんかで書いて、拡張子 .xspfで保存。このプレイリストは、呼び出すリンク元と同じドメインにないと動かないようです。
実際このページに貼ってあるのがこのプレイリストを利用したものです。
（以上ネタ元：Yahoo! Media Player public wiki）
Yahoo Music Player もっと応用編
他にも開発者のWikiには「MIMEタイプ(type="audio/mpeg")を指定すると、拡張子がなくてもオーディオファイルだと判断する」というのがありましたが、これは試してみたところちゃんと動作しませんでした。
ただ、これを利用して例えばmp3へのリンクは貼りたいけど、プレイヤーのリストに入れたくない、というときは、こんなふうに書くと無視してくれるようです。
他にも例え拡張子がphpでもhmtlでもプレイリストに入れてしまう”class="htrack"”などが紹介されてます（どう使うのかは不明）。詳細はWikiをどうぞ。
ご自分のページにjavascriptを貼れない人のためには、FlashベースのプレイヤーEasListenerがすでに発表されてます。
ここまで紹介しといてアレですが、見た目はこっちのほうがかわいい。サイズとかも変更できるし…。でも、追加するのが最低2行ですむという手軽さと、速度は今回の新しいのプレイヤーの方が上っぽいです。
見た目といえば、Yahoo! Developer Network blogで、開発者の方が「見た目は今後の課題。現状では見た目を変えたかったら、CSSを上書きすればいいよ、ただ、自己責任でね。今のCSSを公開する予定はいまのところないけど」と言っておられたので、詳しい方は挑戦してみては（自己責任で！）。
また、同ブログで、以下のjavascriptを上記のjavascriptの上にペーストすると最初にプレイヤーが表示されたとき、たたまれた状態にすることができると書いてありますが…
var ympparams = {};
ympparams.show = 0;
</script>
（ympparams.showの値によって状態が変わります。0は完全にたたまれた状態、1がノーマル、2が展開した状態）。私の環境では正常動作しませんでした。プレイヤーはたたまれるのですが、リストを読まない。なのでご参考までに…。
IEでは動作しないことも…
ただ、このプレーヤー、現状では一部のIEで動作しないようです（プレイヤーは表示されるけど、動かないという環境があるらしい）。今後対応していくようです。現在の詳細なサポート状況はこちらのページの「Browser support」をどうぞ。
いくつかのブログでは、このプレイヤーの発表はYahooが本格的に音楽業界に乗り込む(?)前触れなのでは、とかうわさになっていたりします。今後の展開がたのしみです。
タグ: flash javascript mp3 Web Design Web アプリケーション Yahoo! Yahoo music player
Loading ...