サーバー環境でenchant.jsのサウンドの挙動が変わって右往左往した話
実行環境の違いでenchant.jsが挙動が変わって苦労したときの記録です。
enchant.jsのバージョンは0.8.0でした。
作ったenchant.js製ゲームの動作チェックのため、ファイルをサーバーにあげてテストしてみたところ、
どうもローカルでの動作と違う・・・というかタイトル画面でフリーズしてしまいました。
サーバーの問題かと最初は思って、別のサーバーに上げてみたりするも結果は変わらず。
サウンド関係がおかしいのでは、と睨み、サウンド周りを色々いじってみたら、
どうやらenchant.js本体に問題があるようでした。
原因その1:enchant.jsのバージョンが古かった
よくよくコンソールを見たら
'webkitAudioContext' is deprecated. Please use 'AudioContext' instead.
と怒られていました。
そしてenchant.jsがストップしてしまっていたようです。
こんな表示はローカルでは見なかったのに...と思いつつ、
調べてみたらv0.8.1以上では修正されているようなので、最新版を見ながら該当箇所だけ修正。
しかし上記の表示は出なくなったものの、動作がおかしいのは変わらず。
その後console.logでサウンドファイルのロード状態をチェックしてみたり、
コンソールに出てくるエラーをググってたりと、色々やっているうちにもう一つの原因がつかめてきました。
原因その2:WebAudioSoundで動作しているのに、コードがDOMSoundにしか対応していなかった
こちらのエントリで触れられているように、enchant.jsは環境によってサウンドデータの出力方法を変えています。
そしてローカルではDOMSoundだったのが、どうやらサーバー環境ではWebAudioSoundが選ばれていたようでした。
(さきほどのAudioContextがどうのこうの~という表示にここで納得)
(そういえばWebAudioに対応していないIE11ではちゃんと動いてました)
上記リンク先にもあるように、DOMSoundとWebAudioSoundではコードの作法が若干異なるので、書き方を工夫しないといけません。
ここを直すことでようやくちゃんと動作するようになりました。
「ローカルではDOMSoundで動いていたのに、なぜサーバー環境ではWebAudioSoundで動くのか?」
という謎については結局良くわからなかったです・・・。
2015-07-19 追記
webAudioはローカルで動かそうとするとクロスオリジンポリシー云々でエラーとなるからでした。
enchant.jsはwebAudioが使えない環境ではDOMsoundにフォールバックをするようになっています。
サウンドの扱いは色々難しい・・・。
インフィニティジーンのPROGRESSIVE UFO(グルコスのshadow)のアレをCanvasで再現してみた
http://www47.atpages.jp/ptmania/works/shadow※音の鳴る要素があります。
タイトーの「スペースインベーダーインフィニティジーン」というゲームでPROGRESSIVE UFOという敵が使ってくる特徴的な攻撃(同じタイトーの「グルーヴコースター」でも同様の演出が見れます)をHTML5の Canvasを使って再現してみました。
画面下あたりの"PLAY/STOP SOUND"を押すとアレをします。
元ネタのプレイ動画↓
SPACE INVADERS IG St.4-3 PROGRESSIVE UFO戦 ニコニコ動画|nicotter
これ考えた人たぶん天才なんじゃないかと思います。
最近はこういうプログラミングを使った表現で遊んでいる感じです。