jQueryとJeegooContextとSoundManeger 2 のBGMプレイヤー

　以前公開したjQueryとSoundManager 2の簡易BGMプレイヤーをマイナーチェンジすることにしました。前のバージョンで明らかにこれは・・・というダメな部分を修正しつつ、ボリューム調整など新たな機能を盛り込んで作り直しています。

前回からの変更点１：SoundManager 2を通常ロードにする

　これまでSM2のロードをJavaScriptで動的に行っていたものの、これは時に起動失敗を招く無意味な処置であったことが判明。今回はHTMLのheadタグ内に始めから書く方法に変えています。

変更点２：jQuery Context Menuの代わりにJeegooContextを使用

　右クリック時にメニューが表示されるように、前バージョンではjQuery Context Menuというプラグインを使っていましたが、今回は同じ機能を持つJeegooContextというプラグインに変更しました。

変更点３：ボリューム調整を可能に

　フラッシュをインストールしている環境のみ、音量の調整ができるようにしました。調整用スライダーはjQuery UIのSliderクラスを使用しています。

変更点４：Operaでも曲選択できる

　これまでOperaでは右クリック時のデフォルトアクションを抑止できなかったため、曲選択が不可能でしたが、JeegooContextの導入でダブルクリックすると選択メニューが出るようになりました。

サンプルはこちら

※10/09/28　アイコンのオフセット位置が縦横逆になるミスを修正しました。

まずはセットアップ

　プレイヤーの作成にはおなじみjQueryとjQuery JeegooContextというプラグインを利用しています。

jQueryのダウンロードはこちらから
（v1.4以降追加されたメソッドを使用しているため、バージョンはv1.4以上を使用してください。最新バージョンはv1.4.2）

また、jQuery UI（最新バージョンはv1.8.5）も合わせて使用するので、このページから必要な分をダウンロードしてきます（ダウンロードするファイルは後述）。

jQuery JeegooContextはこのページから
（2010/09時点、最新バージョン1.2.2）

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

　jQueryは、軽量版のjquery-1.4.1.min.js（70K）が用意してあります。

　そしてjQuery UIですが、必要なコンポーネントが、
　　・UI Coreから、Core、Widget、Mouseの三つ
　　・Widgetsから、Slider一つ
　以上四つの部品です。このページ内で四つにチェックを入れて、ダウンロードのボタンを押すと選択した分だけ一つにまとめてくれます。

　解凍したフォルダを開けると、JSとCSSのフォルダが入っているはずです。JSフォルダを開けるとjQuery UIのJSファイルjquery-ui-1.8.5.custom.minが入っています。ただし、すでに自サイトでjQuery UIを使用しているという方は重複に注意してください。ちなみにjQueryの軽量版もこの中に入っているので、わざわざjQueryのページからダウンロードするのが面倒なときはこれを使いましょう。

　CSSフォルダには選択したテーマのフォルダ（デフォルトならui-lightness）が入っており、さらにそれを開くとCSSファイル一つと、画像フォルダがあります。自身のサイトにアップロードするときは、テーマ名のフォルダ（ui-lightness）ごと、CSSのディレクトリに入れると整理しやすいと思います。

　jQuery JeegooContextは、JSファイルやCSSファイルの入っているjeegoocontextフォルダを使用します。ファイルごとに分けるのは面倒だと思うので、自サイトに設置するときはjeegoocontextを使用するページと同じ階層にこのフォルダごと置いてしまうのもいいと思います。
また、SoundManager2もまた軽量版JSファイル（デバッグ機能なしなら30K）が用意されています。

　次にHTMLのheadタグ内に読み込むファイルを記述していくわけですが、前述しましたように今回はSoundManager2もscriptタグに記述します。 JSファイルは上からjQuery、jQuery UI、jQuery JeegooContext、SoundManager2の順に記述します。
　また、CSSファイルはjQuery UIとjQuery JeegooContextの二点を書きます。jQuery JeegooContextのCSSファイルは2種類あり、 cm_defaultもしくはcm_blueのフォルダに入っているファイルを指定します。ファイルを一つのフォルダにまとめている場合、パスや階層を間違えやすいので注意してください。
　もうひとつ、SoundManager2のswfフォルダ内にsoundmanager2.swfが入っていて、これは記述の必要がないもののウェブ上にアップロードしておく必要があります。上記に挙げたファイルも忘れずにアップロードしてください。

記述例（view plainでもソースが確認できます）

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

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

　次にJavaScriptファイルに音楽データやファイルパスの設定を行っていきます。下のファイルをダウンロードしてエディタなどで開いてください。ただし、このページのサンプルはHTMLに直接書かれたスクリプトで動いています。JSファイルとして別にしたいという人は、このファイルを書き換えた後、他のJSと同様にアップロードしてheadタグ内に追加します。 HTMLドキュメント内に書く場合は、オーソドックスにbody要素の終了タグの直前にscriptタグを挿入しその内に記述します。

jquery_jeegoocontext_sm2.js　音楽データ設定ファイル

書き換え箇所は五つ

jQuery(function($) { var m = { //（１）オーディオのオン・オフ切り替え用画像のパスをここに登録します。 audioImg: ['image/music_large.png', 'image/mute_large.png'], //（２）soundmanager2.swfのFlashファイルが置かれているフォルダまでのパスを入力します。 swfPath: 'swf/', //（３）BGMのmp3ファイルが置かれているフォルダまでのパスを入力します。 bgmPath: 'bgm/', //（４）アイコンのサイズと位置を指定。 imageSize: [64, 64], //アイコンのサイズ[x, y]　例） [32, 32] imageOffset: [0, 0], //アイコンの相対位置[x, y]　例） [200, 150] //（５）BGMデータを登録。これでJavaScriptの設定は終了！ data: [ { name: 'EVOLUTION', url: 'evolution.mp3' }, { name: 'きみを想う', url: 'kimi.mp3' }, { name: 'たったひと雫の涙', url: 'namida.mp3' }, { name: '夜と共に耽る', url: 'n23.mp3' }, { name: '日光浴', url: 'tam-n09.mp3' }, { name: '春時', url: 'tamsp14.mp3' } ],

　"audioImg"の配列には、オーディオの再生/ミュートの切り替えボタンとなる画像データを設定します。
ここで使用している画像はICONFINDERというサイトでダウンロードできます。　

　その他にsoundmanager2のJSファイルや、soundmanager2.swfのFlashファイル、音楽ファイルなどが置かれているフォルダのパスを書き換えます。フォルダまでのパスを記述する際は最後に"/"が必要です。

　音楽データについては、すべてJSON（オブジェクト）形式で登録するようになっています。以前はBGMとsoundの区分がありましたが、今回はその区別を撤廃しBGMのみ登録するようになっています。

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

　最後にBGMプレイヤーのアイコンを表示させたい箇所にDIV要素を記述します。ID属性名は必ず"jquery_player"にします。

プレイヤーの操作方法

　最後にプレイヤーの操作方法について説明します。画面のロードが終了すると、画面上に次のようなアイコンが出てくるはずです。音量オン
　このアイコンが音量のオンオフを制御します。左クリックすると音楽再生が始まり、もう一度押すと再生が停止します。曲目を選択するにはアイコン上で右クリックです。プレイリストが出てくるのでこの中から選択してください。Operaブラウザは苦肉の策ですが、右クリックの代わりにダブルクリックでプレイリストが表示されます。音量のボリューム調整は、ブラウザにFlashをインストールしている環境のみ、アイコンにマウスを合わせるとスライダーが表示されるので、それで調整できます。

プレイヤーのサンプル

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

このページだとソースが見にくい、ファイルパスが分かりづらいという人のために、単純にBGMプレイヤーだけを置いているページを作りました。ぜひご参考にしてください（ページが正しく表示されない場合、エンコードをUTF-8に設定します）。BGMプレイヤーオンリーのページ

BGMプレイヤーのフォルダ配置

Music By 音の葉っぱ～効果音・ジングル・BGMのフリー音素材集～ & TAM & 煉獄庭園 & H/MIX GALLERY

ウィザード・コード