SoundManager2を使って、JavaScriptで簡易音楽プレイヤーを作成する

 

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

※10/02/06、jQueryバージョン出来ました。

※10/01/26、js_music.jsを修正しました。

※10/02/07、js_music.jsを修正しました。js_music.jsをお使いの方は修正版の再アップをお願いします（パスの修正などお忘れなく）。

　SoundManager2はFlashの音楽再生機能をJavaScriptで実現するためのライブラリです。 JavaScriptのみでも音楽再生は可能でしたが、ブラウザによって機能に差があり、扱いにくい面がありました。 しかし、このライブラリを使うことで、Flashの知識や開発環境がなくても高性能なFlashのミュージックプレーヤーを利用することができます。
　IE以外のブラウザ（たとえばFirefoxなど）では、JavaScriptで音楽再生（EMBED、OBJECTタグなどを使って）するとたいていタイムラグが発生します。 これでは即時再生が求められる効果音などをページで使うときに困ります。 しかし、SoundManager2を利用することで、Flashの音楽機能をJavaScriptで制御することができるのです。
　ここでは、Flashが利用できる環境ではSoundManager2を使い、そうでない場合はブラウザに合わせた機能を使って音楽再生できるような音楽プレイヤーのスクリプトを紹介したいと思います。
サンプルはこちら

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

まずはセットアップ

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

Prototypeはここから、（追記：Prototypeは、IE8に対応している最新のバージョン（v1.6.1）を利用してください。）
ProtoMenuはこのページからダウンロードできます。
 
　ProtoMenuに関しては、JavaScriptファイル とCSSファイルがそれぞれ必要になります。

　ファイルを用意したら、まずPrototype、ProtoMenu、SoundManager2のJSファイルと、soundmanager2.swfというFlashファイル、 そしてproto.menuのCSSファイルをアップロードします。
次にHTMLのheadタグ内にSoundManager2以外のJSファイルと、proto.menuのCSSファイルを記述します。（ファイルパスの変更も忘れずに）

  <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/proto.menu.js"></script>   <link type="text/css" rel="stylesheet" href="css/proto.menu.css" />  

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

音楽データを登録する

　次に音楽ライブラリを作るため、特定のJSファイルに音楽データの登録をします。次のJSファイルをダウンロードしてエディタで開いてください。

音楽データ用ファイル

  if(typeof jsMusic == "undefined") var jsMusic = {}; jsMusic.dataBase = { 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' } //最後の要素はコンマ(,)をつけない ] }  

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

その他、細かい設定について

　音楽データの設定が終わったら、次にプレイヤーの設定を行います。次のファイルを同様にダウンロードしてエディタで開いてください。

プレイヤー作成用ファイル (2010/02/07 update)

  if (typeof jsMusic == "undefined") var jsMusic = {}; jsMusic.Base = Class.create({ //オーディオのオン・オフ切り替え用画像のパスをここに登録します。 audioImg: ['images/mute.png', 'images/music.png'], //soundmanager2のパスを入力します。 smDir: 'js/soundmanager2.js', //soundmanager2.swfのFlashファイルが置かれているディレクトリ（フォルダ）までのパスを入力します。 swfDir: 'swf/', //BGMのmp3ファイルが置かれているディレクトリ（フォルダ）までのパスを入力します。 bgmDir: 'bgm/', //効果音のmp3ファイルが置かれているディレクトリ（フォルダ）までのパスを入力します。 sndDir: 'snd/', initialize: function() { this.MData = jsMusic.dataBase; //簡易プレイヤーを作成。デフォルトではbodyタグに直接挿入されます。 $$('body')[0].insert(new Element('DIV', { id: 'js_music'} .setStyle({ width: '100px', height: '20px', overflow: 'hidden', zIndex: 100, position: 'absolute', left: '0px', //初期状態ではページ左上に表示されます。 top: '0px' }) )); ......... ......... .........  

　このファイル内では、最初の方にいくつか設定が必要な箇所があります。"audioImg"の配列には、 オーディオの再生/ミュートの切り替えボタンとなる画像データを設定します。
ここで使用している画像はICONFINDERというサイトでダウンロードできます。　

　その他にsoundmanager2のJSファイルや、soundmanager2.swfのFlashファイル、音楽ファイルなどが置かれているフォルダのパスを書き換えます。

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

  $('id_name').insert(new Element('DIV', { id: 'js_music'}  

また、left・topプロパティでも位置を設定することができます。

  $$('body')[0].insert(new Element('DIV', { id: 'js_music'} .setStyle({ ......... ......... left: '200px', top: '50px' }) )); ......... .........  

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

  <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/proto.menu.js"></script> <script type="text/javascript" src="js/js_music.js"></script> <script type="text/javascript" src="js/music_data.js"></script>   <link type="text/css" rel="stylesheet" href="css/proto.menu.css" />  

その他、右クリック時のメニューをカスタマイズしたい場合、proto.menu.cssを開きます。 Proto.MenuのスタイルはデフォルトでGoogleスタイルになっています。たとえば、 横幅を変更したい場合は、下記のwidthプロパティを書き換えます。

  ......... ......... /* GOOGLE STYLES */ .menu.google { width: 7em; /* default 10.5em */ background: #fff; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #676767; border-right: 1px solid #676767; } ......... .........  

またメニュースタイルには、 他にFirefoxやdesktopスタイルが用意されています。変更する場合、js_music.jsのコードを書き換えます。

  ......... ......... this.menu = new Proto.Menu({ selector: '#js_music', className: 'menu google', //"google"の部分を"firefox"、または"desktop"に変える。 menuItems: playList, beforeSelect: function(e) { if (jsMusic.player) jsMusic.player.selectedItem = e.element().firstChild.nodeValue; } }); ......... .........  

プレイヤーの操作方法

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

プレイヤーのサンプル

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

Music By TAM & 煉獄庭園 & 01SoundEarth