2の簡易BGMプレイヤーをマイナーチェンジすることにしました。ボリューム調整など新たな機能を盛り込んで作り直しています。2を通常ロードにするこれまでSM2のロードをJavaScriptで動的に行っていたものの、これは時に起動失敗を招く無意味な処置であったことが判明。今回はHTMLのheadタグ内に始めから書く方法に変えています。今回は同じ機能を持つJeegooContextというプラグインに変更しました。変更点3:ボリューム調整を可能にフラッシュをインストールしている環境のみ、音量の調整ができるようにしました。UIのSliderクラスを使用しています。変更点4:Operaでも曲選択できるこれまでOperaでは右クリック時のデフォルトアクションを抑止できなかったため、曲選択が不可能でしたが、JeegooContextの導入でダブルクリックすると選択メニューが出るようになりました。アイコンのオフセット位置が縦横逆になるミスを修正しました。JeegooContextというプラグインを利用しています。jQueryのダウンロードはこちらから(v1.4以降追加されたメソッドを使用しているため、バージョンはv1.4以上を使用してください。UI(最新バージョンはv1.8.5)も合わせて使用するので、このページから必要な分をダウンロードしてきます(ダウンロードするファイルは後述)。JeegooContextはこのページから(2010/09時点、最新バージョン1.2.2)SoundManager2はここからダウンロードできます。jQueryは、軽量版のjquery-1.4.1.min.js(70K)が用意してあります。Coreから、Core、Widget、Mouseの三つ・Widgetsから、Slider一つ以上四つの部品です。このページ内で四つにチェックを入れて、ダウンロードのボタンを押すと選択した分だけ一つにまとめてくれます。解凍したフォルダを開けると、JSとCSSのフォルダが入っているはずです。UIを使用しているという方は重複に注意してください。ちなみにjQueryの軽量版もこの中に入っているので、わざわざjQueryのページからダウンロードするのが面倒なときはこれを使いましょう。CSSフォルダには選択したテーマのフォルダ(デフォルトならui-lightness)が入っており、さらにそれを開くとCSSファイル一つと、画像フォルダがあります。テーマ名のフォルダ(ui-lightness)ごと、CSSのディレクトリに入れると整理しやすいと思います。JeegooContextは、JSファイルやCSSファイルの入っているjeegoocontextフォルダを使用します。自サイトに設置するときはjeegoocontextを使用するページと同じ階層にこのフォルダごと置いてしまうのもいいと思います。SoundManager2もまた軽量版JSファイル(デバッグ機能なしなら30K)が用意されています。次にHTMLのheadタグ内に読み込むファイルを記述していくわけですが、前述しましたように今回はSoundManager2もscriptタグに記述します。JeegooContext、SoundManager2の順に記述します。JeegooContextの二点を書きます。cm_defaultもしくはcm_blueのフォルダに入っているファイルを指定します。ファイルを一つのフォルダにまとめている場合、パスや階層を間違えやすいので注意してください。ひとつ、SoundManager2のswfフォルダ内にsoundmanager2.swfが入っていて、これは記述の必要がないもののウェブ上にアップロードしておく必要があります。上記に挙げたファイルも忘れずにアップロードしてください。plainでもソースが確認できます)音楽ライブラリを作成する音楽データなどの設定を行う次にJavaScriptファイルに音楽データやファイルパスの設定を行っていきます。下のファイルをダウンロードしてエディタなどで開いてください。このページのサンプルはHTMLに直接書かれたスクリプトで動いています。JSファイルとして別にしたいという人は、このファイルを書き換えた後、他のJSと同様にアップロードしてheadタグ内に追加します。HTMLドキュメント内に書く場合は、オーソドックスにbody要素の終了タグの直前にscriptタグを挿入しその内に記述します。//(1)オーディオのオン・オフ切り替え用画像のパスをここに登録します。//(2)soundmanager2.swfのFlashファイルが置かれているフォルダまでのパスを入力します。//(3)BGMのmp3ファイルが置かれているフォルダまでのパスを入力します。//(4)アイコンのサイズと位置を指定。//(5)BGMデータを登録。],"audioImg"の配列には、オーディオの再生/ミュートの切り替えボタンとなる画像データを設定します。ここで使用している画像はICONFINDERというサイトでダウンロードできます。その他にsoundmanager2のJSファイルや、soundmanager2.swfのFlashファイル、音楽ファイルなどが置かれているフォルダのパスを書き換えます。フォルダまでのパスを記述する際は最後に"/"が必要です。音楽データについては、すべてJSON(オブジェクト)形式で登録するようになっています。以前はBGMとsoundの区分がありましたが、今回はその区別を撤廃しBGMのみ登録するようになっています。"url"には"music01.mp3"のように「ファイル名.mp3」(パスの記述は不要)を設定します。アップロードされているかどうかも確認してください。例によって、オブジェクト({})と配列([])の最後の要素の後にコンマ(,)が付くとブラウザによってエラーになるので注意してください。最後にBGMプレイヤーのアイコンを表示させたい箇所にDIV要素を記述します。ID属性名は必ず"jquery_player"にします。最後にプレイヤーの操作方法について説明します。画面のロードが終了すると、画面上に次のようなアイコンが出てくるはずです。このアイコンが音量のオンオフを制御します。左クリックすると音楽再生が始まり、もう一度押すと再生が停止します。曲目を選択するにはアイコン上で右クリックです。プレイリストが出てくるのでこの中から選択してください。Operaブラウザは苦肉の策ですが、右クリックの代わりにダブルクリックでプレイリストが表示されます。音量のボリューム調整は、ブラウザにFlashをインストールしている環境のみ、アイコンにマウスを合わせるとスライダーが表示されるので、それで調整できます。プレイヤーのサンプル下のアイコンをクリックして試してみてください。このページだとソースが見にくい、ファイルパスが分かりづらいという人のために、単純にBGMプレイヤーだけを置いているページを作りました。ご参考にしてください(ページが正しく表示されない場合、エンコードをUTF-8に設定します)。