JavaScript で HTML5 Audio を使ってサウンド再生. 連続再生対策してるからゲームの SE にも使えるよん♪

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

以前, 『HTML5 Audio を JavaScript で使う方法』というエントリーを書かせていただきました.

が, ゲームに使うにはまだまだ不十分だったので少し改良したやつを作ってみました. 連続再生してもある程度耐えうる作りになっています. Canvas でゲームを作るときなんかに使ってみてください.

※Chrome version 16 は Audio 関係がウンコちゃんになっているので何度も再生すると音が鳴らなくなるバグがあります. version 17 で解消されることを期待しましょう!!

Sample

今回制作したサンプルです.

ボタンを押すと音が再生されます. どのサンプルも見た目は同じですが内部処理が少しだけ違います. 連打してみると Sample 02 が一番安定して音が鳴るのがわかるかと思います. 詳しくは下記の Tips へ.

サンプルデータのダウンロードはこちら.

Tips

Sample 00 - 毎回 Audio 要素を生成して再生する

クリックされるたびに Audio 要素を生成して再生してます.

var data = this.getAttribute("data");
var src  = "se/" + data + "." + AUDIO_EXT;
// サウンド再生
(new Audio(src)).play();

簡単ですね. しかしこれには問題があります. 再生するときにロードが入るため少しタイミングが遅れて音が鳴ってしまいます.

Sample 01 - あらかじめ Audio 要素を生成しておいて再生する

まずはあらかじめ Audio 要素を読み込みます.

// あらかじめ読み込んでおく
var AUDIO_LIST = {
    "se00": new Audio("se/se00." + AUDIO_EXT),
    "se01": new Audio("se/se01." + AUDIO_EXT),
    "se02": new Audio("se/se02." + AUDIO_EXT),
};

そして, 再生.

var data = this.getAttribute("data");
// サウンド再生
AUDIO_LIST[data].play();

これにも一つ問題点が. 同じ Audio 要素を使い回しているため, 再生中にまた再生すると無視されちゃいます.

Sample 02 - Audio 要素をキュー方式で再生する

Sample 00 と Sample 01 の良いとこ取りです. 再生している部分はこちら.

var data = this.getAttribute("data");
// サウンド再生
AUDIO_LIST[data].play();
// 次呼ばれた時用に新たに生成
AUDIO_LIST[data] = new Audio( AUDIO_LIST[data].src );

安定して再生されているのがわかるかと思います. まず Sample 01 と同様あらかじめ Audio 要素を作っておきます. そして, 再生されたタイミングで次の再生に備えて同じ src を参照する Audio 要素を生成(キャッシュ)しておきます.

こうすることで連続再生されても問題なく音が鳴ります. Firefox だと音関係は強いのであまり Sample 00 と違いがわからないかもしれませんが, Chrome や IE9 だとかなりレスポンスの違いがわかるかと思います.

この方法であればシューティングゲームのショットの音や敵が爆発した音なんかも安定して鳴らすことができます.

ただし, この方法にも限界があります. 1フレームに同時に3個も4個も再生されてしまうとさすがに遅延がおきてしまいます. この辺の対策は単純にキャッシュする Audio 要素の数を増やせば良いんですが対応が色々と面倒になってしまうので今回は端折ります.

今回のは"お手軽に"ってことで簡単だけど少し弱い対応になっています. 近々, ちゃんと同一フレームに複数同じ SE が再生されても対応できる sound ヘルパースクリプト書きます!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT