読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

howler.jsでオーディオスプライト


 iOSsafariで動くブラウザゲームを作る用事があって、まあ最新版は勉強中なので古いCocos2d-html5のv2.2とか使っていたのだが、モバイルでは効果音がぜんぜん鳴らないんだな。

 html5のaudio機能は実に面倒くさいことになっている。
 iOS における HTML5 の audio 要素に関する制約を克服する
 特にモバイル版Safariの場合、ユーザーからの入力(onTouchesBeganなど)のタイミングでしかオーディオをロードできない制約がある。必要なときにロードしようとしても無視されるので、ゲームの最初の「スタート」ボタンを押したタイミングで効果音をまとめて先読みしておくべきだ。

 ライブラリはいろいろ試してみたのだが、モバイルブラウザのゲームではhowler.jsが断然おすすめ。軽くて簡潔。

 The state of Audio in HTML5 Games | indiegamr

 まず、audiospriteで効果音をまとめて、オーディオスプライトを作っておく。

$ audiosprite --format howler hoge.mp3 funi.mp3 piyo.mp3

 効果音をまとめたファイルがoutput.oggやoutput.m4aなどの名前で作成される。
 howlerで使うjsonデータもoutput.jsonの名前で同じディレクトリにできる。

 howler.jsのページにあるサンプルがわかりやすいと思うのだが、あとはゲーム開始時に初期化するだけだ。

<script src="howler.min.js"></script>
...

// MenuItemのイベントハンドラなどで
// オーディオ初期化のコードを呼んでおく
var sound = new Howl({
  // ここのJSONはoutput.jsonをコピーして貼り付け
  urls: ['output.ogg', 'output.m4a', 'output.mp3', 'output.ac3'],
  sprite: {
    hoge: [0, 400],
    funi: [2000, 400],
    piyo: [4000, 400]
  }
});
...

// 効果音を再生
sound.play('hoge');

 BGMと効果音を同時に鳴らしたりするとまた面倒くさいのだと思うが、調べていないので何とも言えない。

広告を非表示にする