jQueryプレイヤーの新バージョンを公開しました。JeeGooContextプラグインを使用し、いくつか機能が追加されています。

jQueryとSoundManeger 2 で簡易音楽プレイヤーを作ろう

　以前Prototype.jsとSoundManager2で作成したミュージックプレーヤーを、jQueryのプラグインに置き換えてリメイクしました。 サンプルはこちら

SoundManager2はここからダウンロードできます。

まずはセットアップ

このスクリプトではjQueryとjQuery Context Menuというライブラリを利用しています。

jQueryはここから、（バージョンは最新のv1.4.1以上を利用してください）
jQuery Context Menuはこのページからダウンロードできます。
 
　jQuery Context Menuに関しては、JavaScriptファイル とCSSファイルがそれぞれ必要になります。

　ファイルを用意したら、まずjQuery、jQuery Context Menu、SoundManager2のJSファイルと、soundmanager2.swfというFlashファイル、 そしてjQuery Context MenuのCSSファイルをアップロードします。
次にHTMLのheadタグ内にSoundManager2以外のJSファイルと、jQuery Context MenuのCSSファイルを記述します。（ファイルパスの変更も忘れずに） ちなみにjQueryはパッケージに圧縮版（70K程度）が用意されているので、サイズが気になる人はこちらを使うといいと思います。

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.contextMenu.js"></script>   <link type="text/css" rel="stylesheet" href="css/jquery.contextMenu.css" />  

音楽ライブラリを作成する

音楽データなどの設定を行う

　Prototypeバージョンではプレイヤー用スクリプトと音楽ファイル用を分けていましたが、jQuery版では一緒にすることにしました。 次のJSファイルをダウンロードしてエディタで開いてください。

プレイヤーと音楽データのファイル
（10/02/07　IEをBGSOUNDではなくFlash優先にするバージョンへ変更）

if (jQuery) { (function($){ $.fn.simpleMusic = function(options){ var m = { //オーディオのオン・オフ切り替え用画像のパスをここに登録します。 audioImg: ['image/music.png', 'image/mute.png'], //soundmanager2のパスを入力します。 smPath: 'js/soundmanager2.js', //soundmanager2.swfのFlashファイルが置かれているフォルダまでのパスを入力します。 swfPath: 'swf/', //BGMのmp3ファイルが置かれているフォルダまでのパスを入力します。 bgmPath: 'bgm/', //効果音のmp3ファイルが置かれているフォルダまでのパスを入力します。 sndPath: 'snd/', mute: true, playingNumber: '', flash: false, track: {}, trackList: [] }; //配列やオブジェクトの最後の要素の後にコンマ(,)がつかないよう注意 var data = { //BGMデータ BGM: [ { name: 'MUSIC01', url: 'music01.mp3' }, { name: 'MUSIC02', url: 'music02.mp3' }, { name: 'MUSIC03', url: 'music03.mp3' } ], //効果音データ sound: [ { name: 'SOUND01', url: 'sound01.mp3' }, { name: 'SOUND02', url: 'sound02.mp3' }, { name: 'SOUND03', url: 'sound03.mp3' } ] }; //簡易プレイヤーを作成。デフォルトではbodyタグに直接挿入されます。 $('body:first').append($(document.createElement('DIV')).attr({ id: 'player' }).css({ zIndex: 100 })); var player = $('#player');  

　ファイル内で変更するべき箇所は最初の方に集中していて、ひとつは"m"というオブジェクトに格納する変数、 もうひとつは"data"という配列に格納するオブジェクト群です。"audioImg"の配列には、 オーディオの再生/ミュートの 切り替えボタンとなる画像データを設定します。
ここで使用している画像はICONFINDERというサイトでダウンロードできます。　

　その他にsoundmanager2のJSファイルや、soundmanager2.swfのFlashファイル、音楽ファイルなどが置かれているフォルダのパスを書き換えます。 フォルダまでのパスを記述する際は最後に"/"が必要です。なお、soundmanager2にもデバッグ機能を削った圧縮版（25K程度）があります。

　音楽データについては、すべてJSON（オブジェクト）形式で登録するようになっています。 BGMとsoundの区分がありますが、基本的にBGMの配列内にデータを記述します。sound（効果音）はいらないという人がほとんどだと 思います。その場合でも、下に示すようにsoundという配列は残すようにしてください。

var data = { //BGMデータ BGM: [ { name: 'MUSIC01', url: 'music01.mp3' }, { name: 'MUSIC02', url: 'music02.mp3' }, { name: 'MUSIC03', url: 'music03.mp3' } ], //効果音データは不要という場合でも、空の配列を残しておく。 sound: [] };  

　それぞれの音楽データには、"name"と"url"というプロパティが設定可能で、"name"には"MUSIC01"といった曲名を設定し、 "url"には"music01.mp3"のように「ファイル名.mp3」（パスの記述は不要）を設定します。登録した音楽ファイルについては、 アップロードされているかどうかも確認してください。また、いくつでも音楽ファイルを追加することができますが、 配列やオブジェクトの最後の要素でコンマをはずし忘れると、IEなどでエラー扱いになるので注意が必要です。

　プレイヤーアイコンは初期状態ではサイトの画面左上に出てしまいます。
プレイヤーを特定の要素のなかに置きたいという場合は、その要素にID属性名を設定して、 上記のコードの46行目で、$('body:first')の部分をその要素指定のものに書き換えます。たとえば、 その要素のID属性が"id_name"ならば、次のようになります。

<!-- "id_name"というID属性名をつけた要素にアイコンを設置する。 --> <div id="id_name" style="margin-left:40px;width:32px;height:32px;"></div>  

  ......... ......... $('#id_name').append($(document.createElement('DIV')).attr({ id: 'player' }).css({ zIndex: 100 })); var player = $('#player'); ......... .........  

　アイコンの画像サイズはデフォルトで縦横32×32となっているので、もし別のサイズの画像を使う場合、以下のコードを変更する必要があります。

  ......... ......... var audio = divElement.clone() .append($(document.createElement('IMG')) .attr({ src: m.audioImg[1] }) .width(32) //ここにアイコンの横幅（整数値）を入力 .height(32) //アイコンの縦幅（整数値）を入力 .css({ cursor: 'pointer' }) ); player.append(audio); ......... .........  

　leftプロパティやtopプロパティでアイコンの位置を変えたいという人がいるかもしれません。しかし、jQueryバージョンでは アイコン元の要素のpositionプロパティをrelativeやabsolute にすると右クリックしたときにメニューが正常な位置に出てこない という問題があったため、位置は変更しないようにしています。

プレイヤーの設定は以上で終了です。設定を終えたjquery_music.jsを他のファイルと同様にアップロードした上でHTML内に埋め込みます。

  <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.contextMenu.js"></script> <script type="text/javascript" src="js/jquery_music.js"></script>   <link type="text/css" rel="stylesheet" href="css/jquery.contextMenu.css" />  

メニューのデザインをカスタマイズする

右クリック時に開くメニューの外観をカスタマイズしたいときは、CSSファイルのjquery.contextMenu.cssを書き換えます。 ただし、最初から用意されているメニュースタイルが一つしかないため、デフォルトのスタイルを参考に新たにデザインしなければ なりません。ここではPrototypeバージョンで利用したProto.Menu.cssのデザイン二つを引っ張って くることにしましょう。jQuery向けに若干修正したものを次に示します。

CSSファイルはここからダウンロードすることもできます。

FirefoxとGoogleのデザイン

/* Firefox style */ .contextMenu_firefox { position: absolute; width: 140px; /* メニューの横幅はここで指定します。 */ z-index: 99999; margin: 0px; padding: 0px; display: none; background-color: #F4F5EB; /* メニューの背景色 */ border-top: 1px solid #ddd; /* メニュー外側の枠線 */ border-left: 1px solid #ddd; border-right: 1px solid #666; border-bottom: 1px solid #666; } .contextMenu_firefox LI { list-style: none; font-size: 14px; /* フォントサイズ */ padding: 2px 0px; margin: 0px; } .contextMenu_firefox A { text-decoration: none; display: block; color: #555; padding: 4px 15px; margin: 0 2px; } .contextMenu_firefox LI.hover A { background-color: #006; /* マウスを乗せたときの背景色 */ color: #fff; /* マウスを乗せたときの文字色 */ } .contextMenu_firefox LI.disabled A { color: #bbb; /* 見出し部分の文字色 */ cursor: default; } .contextMenu_firefox LI.hover.disabled A { background-color: #F4F5EB; /* 見出し部分にマウスを乗せたときの色設定 */ color: #bbb; } .contextMenu_firefox LI.separator { border-top: 1px solid #CCC; /* 区切り線の色設定など */ } /* Google style */ .contextMenu_google { position: absolute; width: 140px; /* メニューの横幅はここで指定します。 */ z-index: 99999; margin: 0px; padding: 0px; display: none; background-color: #fff; /* メニューの背景色 */ border-top: 1px solid #ccc; /* メニュー外側の枠線 */ border-left: 1px solid #ccc; border-bottom: 1px solid #676767; border-right: 1px solid #676767; } .contextMenu_google LI { list-style: none; font-size: 14px; /* フォントサイズ */ padding: 2px 0px; margin: 0px; } .contextMenu_google A { text-decoration: none; display: block; margin: 0 2px; padding: 2px 5px; color: #00c; cursor: pointer; } .contextMenu_google LI.hover A { color: #00c; /* マウスを乗せたときの文字色 */ background-color: #D3E3FE; /* マウスを乗せたときの背景色 */ } .contextMenu_google LI.disabled A { color: #bbb; /* 見出し部分の文字色 */ cursor: default; } .contextMenu_google LI.hover.disabled A { background-color: #fff; /* 見出し部分にマウスを乗せたときの色設定 */ color: #bbb; } .contextMenu_google LI.separator { border-top: 1px solid #CCC; /* 区切り線の色設定など */ }  

　デザインの適用方法は、jquery_music.jsコード内の一箇所を書き換えるだけです。120行目あたりに 以下のような部分があるので、リストタグのクラス名を変更するaddClass()メソッドの引数を、 "contextMenu_firefox"や"contextMenu_google"など任意のものに変更します。

  ......... ......... var liElement = $(document.createElement('LI')), aElement = $(document.createElement('A')); var playList = $(document.createElement('UL')) .addClass('contextMenu_firefox') //このaddClass()メソッドの引数に好きなクラス名を入力 .attr({ id: 'myMenu' }) .append(liElement.clone() .addClass('disabled') .append(aElement.clone() .attr({ href: '#playList' }) .html('プレイリスト')) ); ......... .........  

プレイヤーの操作方法

　最後にプレイヤーの操作方法について説明します。画面のロードが終了すると、画面上に次のようなアイコンが出てくるはずです。
　このアイコンが音量のオンオフを制御します。左クリックすると音楽再生が始まり、もう一度押すと再生が停止します。
　曲目を選択するにはアイコン上で右クリックです。プレイリストが出てくるのでこの中から選択してください。ただし、Operaブラウザではうまくいかないようです。Ctrlキーを押しながら試してみてください。

プレイヤーのサンプル

　下のアイコンをクリックして試してみてください。

Music By TAM & 煉獄庭園 & 01SoundEarth