SoundJS のサンプル内容確認

CreateJS 内 SoundJS のサンプルデモページをみてみると、現在 mp3 再生に対応していない Firefox や Opera でもサウンドの再生が確認できます。

　http://www.createjs.com/#!/SoundJS/demos/mediaPlayer

ソースコードをみてみると、サウンドファイル読み込みを行う箇所で次のような読み込みファイルパス記述を目にする事ができます。

var assetPath = "assets/";
var manifest = [
	{src:assetPath+"M-GameBG.mp3|"+assetPath+"M-GameBG.ogg", id:"music"}
];

mp3 と ogg ファイルパスを "|" でつなげて記述しています。
このように記述することで、mp3 が再生できない環境では ogg ファイルが読み込まれ、ogg ファイルでのサウンド再生となるようです。

サウンドファイルを考慮したディレクトリ構成

Toolkit for CreateJS 1.1 では、mp3 を出力する機能しか備わっていません。
今後あらゆる html5 環境で mp3が (あるいはどのようなサウンドフォーマットでも) 再生可能になるのか、もしくは Toolkit for CreateJS が mp3 以外のフォーマット出力可能になるのかどうかは わからない所ですが、現在の状況に合った対処を行いたいと思います。

対処策としては以下を行います。

・mp3, ogg ファイルを任意のサウンド用ディレクトリに手動で配置し そちらを読み込ませる
・手動で配置されたファイルへのパス記述は Haxe (javascript)内処理で自動変換する

前回の記事では以下の様なファイルディレクトリ構成となりました。

index.html
├ js/
│　└ App.js
└ createjs/
　　├ view/
　　│　├ view.js
　　│　├ view.html
　　│　└ images/
　　│　　　├ _0.png
　　│　　　├ _1.png
　　│　　　├ _2.png
　　│　　　└ _3.png
　　└ sound/
　　　　├ sound.js
　　　　├ sound.html
　　　　└ sounds/
　　　　　　└ shootingseExplosion.mp3

今回は以下の様なファイルディレクトリ構成にします。

index.html
├ js/
│　└ App.js
├ createjs/
│　├ view/
│　│　├ view.js
│　│　├ view.html
│　│　└ images/
│　│　　　├ _0.png
│　│　　　├ _1.png
│　│　　　├ _2.png
│　│　　　└ _3.png
│　└ sound/
│　　　├ sound.js
│　　　├ sound.html
│　　　└ sounds/
│　　　　　└ shootingseExplosion.mp3
│
└ createjs_sounds/
　　└ sound/
　　　　└ sounds/
　　　　　　├ shootingseExplosion.mp3
　　　　　　└ shootingseExplosion.ogg

createjs/ ディレクトリ内と同じサウンドディレクトリ構成を createjs_sounds/ 内に作成します。createjs_sounds/ 内には手動でサウンドファイルを配置します。createjs/view/ ディレクトリ内にはサウンドファイルがないため、createjs_sounds/view/ ディレクトリは作成していません。

手動でサウンドファイルを配置するのはやや面倒ですが、fla ファイル内のサウンドファイルの設定は過去の経験上そうそう変更されないため、ある程度許容可能な対処となります。

手動でのサウンド配置ディレクトリを分ける理由

ogg ファイルを createjs/ 内サウンドディレクトリには配置せず、createjs_sounds/ ディレクトリをわざわざ新規で作成し配置する理由は以下となります。

Toolkit for CreateJS から出力される mp3 の音量がでかい

あらゆる環境で再生できるような mp3 フォーマットに変換している、かどうか不明ですが、Toolkit for CreateJS で出力された mp3 はやたら音量が大きくなってしまいました。SoundJS 側で音量調節は可能ですが、それでもまだうるさい音量なので、このまま利用するのは難しいです。よって、別途サウンド編集用ソフトで音量が正常な mp3 ファイルと ogg ファイルを作成し手動で配置する事になります。
ここで、配置先を createjs/ ディレクトリ内にすると、配置後の Toolkit for CreateJS によるパブリッシュで、また音量の大きな mp3 に書き換わってしまうという問題が発生します。

Toolkit for CreateJS から出力される mp3 ファイル音量が正常になるのであれば、この問題は解決します。しかしまだ次の問題があります。

fla ファイル内構成が変更される場合 パブリッシュ先ディレクトリ内に不要なデータが残る

fla ファイル内で利用する画像の変更等が行われた場合、Toolkit for CreateJS から出力されるファイル構成に変更がかかります。

例えば、fla ファイル内構成の変更がかかり createjs/view/images/_0.png が createjs/view/images/a.png に差し替わったとします。createjs/view/images/_0.png はもう使用される事はありません。
しかし Toolkit for CreateJS のパブリッシュ先ディレクトリには createjs/view/images/_0.png が残ったままとなってしまいます。

├ createjs/
│　├ view/
│　│　├ view.js
│　│　├ view.html
│　│　└ images/
│　│　　　├ a.png
│　│　　　├ _0.png ← 残ったまま
│　│　　　├ _1.png
│　│　　　├ _2.png
│　│　　　└ _3.png

ファイルをサーバにアップロードする際、不要なファイルを手動で排除する、といった行為は大変手間がかかります。Toolkit for CreateJS パブリッシュ先ディレクトリ内に 使用するデータのみの配置を行いたい場合、パブリッシュ前に パブリッシュ先ディレクトリの内容を全て削除する、という方法がよいと考えます。

Toolkit for CreateJS から出力されるファイル以外のデータを パブリッシュ先ディレクトリ createjs/ 内に配置したくないのは、この理由が大きいです。

今後を考慮

現状では、手動によるサウンドファイル配置ディレクトリ分けを行うのがベターだとしましたが、別途理由で createjs_sounds/ ディレクトリではなく、パブリッシュ先ディレクトリ createjs/ 内にサウンドファイルの配置を行いたい、という場合もあるかもしれません。
また、Toolkit for CreateJS がバージョンアップし上記問題点が解決すれば、あるいは各ブラウザの html5 のサウンドフォーマット対応状況が改善されれば、手動による createjs_sounds/ ディレクトリへのサウンドファイルの配置は必要なくなります。

よって、Haxe 側の処理では、ogg ファイルを利用するか、あるいはサウンドファイル配置先を別に設けるかどうかは任意に設定できるようにします。

Haxe 側の対処

createjs/sound/sound.html 内には 以下のサウンドファイルへのパスが記述されています。

var manifest = [
	{src:"sounds/shootingseExplosion.mp3", id:"shootingseExplosion"}
];

src の記述箇所を以下にように、あらゆるパスを扱えるような変換処理を行えばよしとなります。

デフォルトmp3を利用
createjs/sound/sounds/shootingseExplosion.mp3

mp3 読み込み先は createjs_sounds/ を利用
createjs_sounds/sound/sounds/shootingseExplosion.mp3

createjs/ 内で ogg ファイルも利用
createjs/sound/sounds/shootingseExplosion.mp3|createjs/sound/sounds/shootingseExplosion.ogg

createjs_sounds/ 内で ogg ファイルも利用
createjs_sounds/sound/sounds/shootingseExplosion.mp3|createjs_sounds/sound/sounds/shootingseExplosion.ogg

Toolkit for CreateJS から出力されたデータの一括解析読み込み Haxe ライブラリ

前回作成した Haxe クラス群に今回のサウンド周りの対処を組込み、一括して html 解析から 素材読み込みまでの処理を行う Haxe ライブラリを作成しました。

　Haxe ライブラリ
　http://www.dango-itimi.com/blog/swf/175/src.zip

src.zip から展開されるファイルディレクトリ構成は以下となっています。

src
├ Main.hx
└ lib/
　　├ toolkit_for_createjs/
　　│　├ Preloader.hx
　　│　├ …略…
　　│　…略…
　　│　
　　└ net
　　　　├ …略…
　　　　…略…

lib.toolkit_for_createjs パッケージ以下が今回の Toolkit for CreateJS 用ライブラリ一式です。Preloader.hx を呼び出すと、解析から読み込みまで全ての処理を一括して行なってくれます。Main.hx は Preloader.hx を呼び出すサンプルコードが記述されています。

Main.hx 内記述を一部抜粋します。

　　…略…
	private function initialize(event){

		Ticker.useRAF = true;		
		Ticker.setFPS(24);
		Ticker.addListener(run);
		
		stage = new Stage(cast js.Lib.document.getElementById("canvas"));
		
		initializeToPreload();
	}
	private function run(){
		
		mainFunction();
	}
	private function initializeToPreload(){
		
		preloader = new Preloader("createjs", "createjs_sounds", true);
		//preloader = new Preloader("createjs", "createjs_sounds");
		//preloader = new Preloader("createjs");
		//preloader = new Preloader("createjs", "", true);
		
		preloader.addMaterialDirectory("view");
		preloader.addMaterialDirectory("sound");
		
		mainFunction = preload;
	}
	private function preload(){
		
		preloader.run();
		if(preloader.isFinished())
			mainFunction = initializeToPlay;
	}
	private function initializeToPlay(){
　　　…略…
	}
　　…略…

Preloader クラスのコンストラクタでパラメータを指定する事により「createjs_sounds ディレクトリにサウンドファイルが配置されているかどうか」「ogg ファイルを利用するかどうか」の設定が可能です。
Preloader クラスのインスタンス生成後は、Preloader.addMaterialDirectory メソッドに、Toolkit for CreateJS でのパブリッシュ先ディレクトリ名を追加していきます。
その後、Preloader.run メソッドを繰り返し実行し、Preloader.isFinished メソッドが true を返したら、すべての処理が完了した事を意味します。

今回の Haxe ライブラリを用い変換された javascript ファイル App.js を配置した、サーバにアップロードするファイルディレクトリ一式は以下からダウンロードできます。

　http://www.dango-itimi.com/blog/swf/175/deploy.zip

【サウンドファイルを考慮したディレクトリ構成】の項で説明したファイルディレクトリ構成と同等のものとなります。ローカル PC 上ではファイル読み込みが行えないため、ネットワーク上で動作確認を行う必要があります。もしくは以下の URL から動作確認が可能です。前回と同じ表示となりますが、Opera や Firefox からでも音が再生されるようになっています。

　http://www.dango-itimi.com/blog/swf/175/a href=