SEP
14
2009

SoundManager2

ページ上でサンプルとなる音源を試聴させる機会があって、アプローチを模索中に出会ったライブラリ。
サンプルの尺も短いし、シークやポーズなどのコントローラも要らない、出来るだけシンプルに再生させたいという僕のニーズにピッタリでした。shadowBoxとかは少し大げさだし、なければ作ろうかと思ったんですが、あんまり使う機会に出会えないのでどうしようかと思ってたのですが、丁度よかった。
内部的にswfを抱えていて、ExternalInterface経由でswfと通信。API部分をjsでラップした感じのものです。

ここからまずダウンロード。
ダウンロードしてきたzipを展開すると、中に色々はいってるけど必要なのはscriptディレクトリとswfディレクトリだけ。その中からscript/soundmanager2.js(debug機能の無い圧縮版もあるのでどっちでもいけます。僕は中身をおっかけたかったのでuncompress版をここでは使用してます。)をページに読み込み、swfディレクトリを任意の場所におきます。

次にユーザー定義のjsを作成し、以下のように設定します。

//settings
soundManager.url = "swf/"; //swfディレクトリをおいた場所
soundManager.debugMode = false; //デバッグするかどうか。これはfalseにしとかないとブラウザ上にデバッグの内容が表示される
soundManager.flashVersion = 9; //使用するflashplayerのバージョン。8か9が指定できる。

前述したように内部的にはswfを抱えているので使用するflashPlayerのバージョンを記述できます。デフォルトでは8になっていますが、9に変更するとビデオの再生が出来たり、波形がとれたりflashPlayer9から使えるようになったAPIとのやりとりが出来ます。普通に音の再生用に使うには8で全く問題ないので、この記述はしなくてよいかも。

で、soundManagerの初期化待ちをします。こちらが事実上のエントリポイントになります。
soundManagerの初期化が終わるとonloadイベントが呼ばれるので、この中で実際の曲オブジェクトを作っていきます。

var sound; //サウンドオブジェクト(SMSoundインスタンスが格納される)
soundManager.onload = function()
{
	sound = soundManager.createSound({
		id : 'sound1', //ユニークなID
		url : 'path/to/song.mp3' //mp3ファイルへのパス
	});
}

createSoundするときに必要最低限idとurlを渡しておけば機能しますが、他の細かな設定も一緒にわたせます。
とくに曲の終了のタイミングをとりたい場合なんかは多いと思うのですが、そういう場合はonfinishという名前でfunctionを設定するとコールバックとして再生終了後に呼ばれるし、再生中をとりたければwhileplayingとか設定できます。とにかく色々設定できるのであとはこのへんを参考にしてみると良いです。

あとは作ったサウンドオブジェクト(ここではsound)に対してsound.play()なりsound.stop()なりしてあげれば曲が再生されます。らくちん。
実際にページ内でクリック時に再生する場合はjQueryと併用して書いてあげるとさらにらくちん。

var target = "#sound a.song";
soundManager.onload = function()
{
	//もろもろ初期化
	$(target).trigger("SMInit");
}

$(function(){
	$(target)
		.hide();
		.bind('SMInit', function(){
			$(this).show();
		})
		.click(function(){
			//ここで再生、停止処理
			return false;
		})
});

やや冗長だけど、soundmanagerの初期化のタイミングとの整合性をつけるために、最初は再生ボタン自体を隠しておいて、初期化完了のタイミングでカスタムイベントを発行して、ボタンを表示という形にしました。より汎用的にプレーヤーを作って使い回したい場合は、このページのinlineplayer.jsが参考になります。

Category : javascript

0

No Comments.

form

Leave a comment.

back2top