===jQuery:jPlayerのplaylist mp3プレーヤーをカスタマイズしてみる=== 注意!!今現在のjPlayerは、Ver.2.0.0がリリースされており、メディアプレーヤーになっています。mp3プレーヤーは、Ver.1.2.0までです。そして この頁のjPlayerは、Ver.1.1.0です。ブラウザの更新で、オペラVer.10.63、ファイヤーフォックスVer.3.6に更新すると、動かなくなります。IEとサファリは動きます。 Ver.1.2.0とは、仕様が違っていますので、お気をつけください。>Ver.1.2.0のサンプルはこちら(オペラVer.10.63、ファイヤーフォックスVer.3.6でも動きます) ↓Ver.1.10 のsample↓ |
jPlayerとは、一部FLASHを使い、HTMLとCSSで作成されており、 オープンソースはこんな↓感じです。 ●参照サイト・デモサイトは以下↓ ・[JS]簡単に設置ができるmp3プレイヤーのスクリプト -jPlayer ・Demo jPlayer *.*.* : jQuery audio player plugin(常に最新版が表示) ●プレイリスト付きのプレーヤーは他にもたくさんありますが、 この「jPlayer」は、日本語表示が可能なリストプレーヤーです。それを ←こんな風にカスタマイズしてみました。 ●上のプラグインサイトの下の方にある、「jPlayer 1.1.0」の( demos ZIP )を クリックし、ダウンロードして、解凍します。 その中の「demo-02-withDownloadMP3.htm」をカスタマイズします。 そのソースを見てみると、 "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" も必要なので、ダウンロードしておきます。 |
||
フォルダ構造 ↓ オープンソースのフォルダ。 ●最終的にはこんな↓フォルダ構造に。 |
●まず、再生ボタンなどの元になっている "jplayer.blue.monnday.jpg"を作り変えます。 ←マウスオーバーすると元の大きさの画像になります。 こちらがデフォルトの部品JPGです。 "skin/jplayer.blue.monnday.jpg" ←こちらが新しく作った部品です。 ←マウスオーバーすると元の大きさの画像になります。 ←クリックすると大きい画像が開きます。 大きさや座標はそのままですが、各部品を小さくして、 透明部分を保持したい為、PNGファイルで保存しました。 ファイル名は、"jplayer.png"です。 ●次に、部品を配置する背景を作り、skinフォルダに保存します。 これも透明部分を保持したいので、"jplayer_bg.png"として保存。 (↓クリックすると開きます) 222×63ピクセル ●その他に用意した画像は、以下の8つ。 ←歌詞カード用 "kasi.jpg" ←リスト用 "headphone.gif" GIFファイルです。 ←リスト用 "volume.gif" アニメーションGIFファイルです。 ←リスト背景用 "volumebg.gif" 上に同じ。 ↑マウスオーバーすると元の大きさの画像になります。 ボックス背景用の画像。"bgup.png" ↑マウスオーバーすると元の大きさの画像になります。 ボックス背景用の画像。"bgcenter.png" ↑マウスオーバーすると元の大きさの画像になります。 ボックス背景用の画像。"bgbottom.png" 上の7つは、skinフォルダに保存します。 ←マウスオーバーすると元の大きさの画像になります。 ジャケット用の画像。"AVCA-29654.jpg" このファイルは、CDフォルダに保存します。 ●mp3.ファイルや、歌詞カードのhtml.ファイルも用意します。 各mp3.ファイルは、約1秒の無音になってます。CDフォルダに保存。 (音がならない!とビックリしないでください。笑) 各html.ファイルは、サイト"うたまっぷ.com"にリンク。 このサイトは、印刷はダメですが、リンクはいいみたいです。 subフォルダに保存。 ●触らないフォルダは、「js」フォルダと「libs」フォルダのみ。 |
|
●表示用html.や、カスケーディングスタイルシートのカスタマイズをします。表示用html.は「song.html」と命名してパブリックフォルダ(一番上のフォルダ)に保存。 カスケーディングスタイルシートは「jplayer.css」と命名してskinフォルダに保存。 ●mp3ファイルは、次々に連続再生され、永遠にループします。 もし、ディスク名や次のジャケット名で止めておきたい時は、ないファイルにリンクさせておくと良いかも。 例えば、"CD/00.mp3"としておくと「早送りボタン」を押すまで止まります。 私は連続再生させたい派なので、デフォルトのスクリプト部分は触りませんが、もし、全ての曲が、クリックしないと再生しない様にしたい時は、スクリプトを触る?のかな? 例えば、「$("#jquery_jplayer").jPlayer("play");」部分を「$("#jquery_jplayer").jPlayer("stop");」に変更?。試してませんし、動くかは保証しません。 | ||
●表示用html.のカスタマイズ(Ver.1.1.0 です) Ver.1.2.0のサンプルはコチラ "demo-02-withDownloadMP3.htm"を"song.html"として保存。
|
||
●カスケーディングスタイルシートのカスタマイズ(Ver.1.1.0 です) Ver.1.2.0用のカスタマイズ.cssはコチラ
|
||
●CSSのカスタマイズ 2 例えば下記のようにすると更にカスタマイズできます。(Ver.1.1.0 です) Ver.1.2.0用のカスタマイズ.cssはコチラ
|
||
●以上、わかりやすい様に見慣れた漢字&ひらがなを使ってみましたが、本来、音源本体や画像には、「著作権」というものがあります。 紹介だからと、間違っても、WEBにアップしないように。著作権違反をしないよう、お気をつけください。 ●参照サイト・デモサイトは以下↓ ・Download jPlayer : the CSS styleable jQuery media player plugin(常に最新版が表示。下のほうに旧バージョンへのリンクがある。) ・Developer Guide jPlayer 1.1.0 : jQuery media player plugin(Ver.1.1.0用ガイド。対応ブラウザやサーバーの応答、.mp3のビットレートなどが記載されている。) ・Developer Guide jPlayer 1.2.0 : jQuery media player plugin(こちらはVer.1.2.0用ガイド。) 自分のWEBサーバーにアップする場合、お使いのサーバーの仕様も確認する必要がある?!ビットレートが対応してないと再生できない?! ローカルではいいのに、サーバーにアップすると動かない原因はこのあたりにあるのかも。 ●プレイヤーを使いまわししたい場合などは↓ ・[JS]簡単に設置ができるmp3プレイヤーのスクリプト -jPlayer のサイトを参考にしてください。表示用.html がスマートになります。 また、jsを外部にして呼び込むようにすれば、更にカスタマイズできると思います。 ●今現在、jPlayerは、Ver2.0.0になってリリースされており、メディアプレーヤーになっています。mp3プレーヤーは、Ver.1.2.0までです。 FLASHのアクションスクリプトはVer.3になり、ジャバスクリプト、CSS、SWFプレーヤー、HTML全てが変更されています。 これは、ブラウザの、オペラVer.10.63、ファイヤーフォックスVer.3.6の更新にともなうものと思われます。(Ver.1.1.0 では動かない) コチラのサンプルも jPlayer/Ver.1.2.0用に変更しカスタマイズしましたが、今後もこんな変更があるかもしれません。 動かないのでは仕方ないですが、その度のカスタマイズは、ちょっとつらいですね。
|