最近公開された SoundJS 0.5.2 から Sound.alternateExtensions プロパティが利用可能になりました。このプロパティを利用する事で、読み込むサウンドフォーマット指定を簡単に行えるようになりました。

　Sound.alternateExtensions
　http://www.createjs.com/Docs/SoundJS/classes/Sound.html#property_alternateExtensions

SoundJS 仕様

SoundJS では、Web Audio API でサウンドを再生する事が可能です。しかし Web Audio API では再生可能なサウンドフォーマット(mp3, ogg 等)はブラウザごとに異なる状況となっています。例えば Google Chrome では mp3 ファイルの再生が可能ですが、Firefox, Opera では mp3 ファイルは再生できず、その他サウンドフォーマット(ogg 等)を指定する必要があります。

対処としまして SoundJS では、読み込むファイルを「|」区切りで複数指定する事で自動的に読み込まれるファイルが選択されるようになります。

test.mp3, test.ogg ファイル読み込み指定例

var manifest = [
	{src:"test.mp3|test.ogg", id:"test"}
];

問題点

Flash CC の HTML5 Canvas ドキュメントでは、パブリッシュされた js ファイル内に以下の様な 記述が行われます。

lib.properties = {
	…略…
	manifest: [
		{src:"sounds/test.mp3", id:"test"}
	]
};

test.mp3 の他、test.ogg ファイルを読み込ませたい場合、以下のように js ファイル内ソースを書き換える必要があります。

lib.properties = {
	…略…
	manifest: [
		{src:"sounds/test.mp3|sounds/test.ogg", id:"test"}
	]
};

しかしこの記述を行っている js ファイルは パブリッシュを行う度に書き換わってしまうため、パブリッシュ毎に test.ogg ファイルの記述を追加する必要が出てきてしまいます。

Sound.alternateExtensions で解決

上記問題は Sound.alternateExtensions プロパティを利用する事で解決します。先ほどの例と同じく HTML5 Canvas 出力でパブリッシュされた js ファイルに以下のような内容が書かれているとします。

lib.properties = {
	…略…
	manifest: [
		{src:"sounds/test.mp3", id:"test"}
	]
};

js ファイルの他、同時に出力可能な html ファイル内には以下の変更 or 記述を追加します。

…略…
//バージョン 0.5.2 移行を指定
<script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>
…略…
function init() {
	canvas = document.getElementById("canvas");

	createjs.Sound.alternateExtensions = ["ogg"]; //追加

	var loader = new createjs.LoadQueue(false);
	loader.installPlugin(createjs.Sound);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(lib.properties.manifest);
}
…略…

これにより、test.mp3 が再生されないブラウザでは test.ogg ファイルが読み込み・再生されるようになります。

[ FLASH ] [ tips ] 投稿者 siratama : 2014年01月20日 19:26