1-3.音声出力に注目してみる

HTML5では音声ファイルの再生が簡単に行える

samplejpg

本章の最初に紹介したゲームでは、全てで効果音を鳴らしています。 HTML5では音声ファイルを簡単に再生できるため、作成するゲームに効果音を入れるのは簡単です。

ただし、効果音をより効果的に使いたい場合には、ちょっとしたテクニックを必要とします。 本章の最初に紹介したゲームでは「小惑星撃退ゲーム」や「スピードレーシング」で様々なテクニックを使ってみています。

本節では、効果音の再生時に利用できるテクニックについて少し細かく見ていきます。

再生と停止

HTML5ではaudio要素が追加されました。 このaudio要素ではJavaScriptプログラム用に幾つかのメソッドが公開されています。それらのメソッドを利用すると、JavaScriptプログラムは音声ファイルの再生と停止を簡単に行えます。

本章の最初に紹介した「小惑星撃退ゲーム」では、ゲームを開始するとBGMが流れ始めますが、 これは、audio要素に対して音声ファイルを再生する指示を出す事で実現しています。

また、「小惑星撃退ゲーム」のプレイ中にEscキーを押すとBGMは瞬時に停止しますが、これは、audio要素に対して音声の再生を中止するように指示しているからです。

ループ再生

audio要素にはloop属性を指定できます。 しかし、この文章を書いている2011年1月時点では、主要ブラウザの中にはこの属性を無視するものがあります。 このため、loop属性を指定して音声ファイルをループ再生させようとするのは危険です。

しかし、audio要素からは再生状態の状態変化をイベントとして受け取れます。 このため、再生終了イベントの通知を受けたタイミングで再度再生を開始するようにプログラム側で対処すれば、現時点でも音声ファイルのループ再生は行えます。

本章の最初に紹介したゲームでは「小惑星撃退ゲーム」と「スピードレーシング」でこのテクニックを使ったBGMのループ再生を実現しています。

複数音声の同時再生

一つのHTMLファイルに複数のaudio要素を定義すれば、それらのaudio要素で指定した音声ファイルを同時に鳴らすことは可能です。 しかし、あるaudio要素の再生中に同じaudio要素で指定された音声ファイルをもう一つ鳴らそうとしても上手くは行きません。

本章の最初に紹介した「小惑星撃退ゲーム」では、小惑星を破壊したタイミングで爆発音を鳴らしています。 このゲームでは、自然な動作として、ある小惑星を破壊してその効果音が鳴っている最中にも他の小惑星を破壊できるようにしています。

このような場合に問題となるのが、上記した、音声ファイルの再生中にもう一度再生を行うと上手く再生されない、という点です。 音声ファイルの再生中にもう一度再生を指示した場合、通常は二度目の指示は無視されます。

しかし、このような問題もプログラム側で対処すれば回避は可能です。 異なるaudio要素に対する再生は同時に行われます。 このため、同じ音声ファイルを複数のaudio要素で指定しておき、プログラムではそれらを順番に使っていけば良い訳です。 「小惑星撃退ゲーム」では、このようなテクニックを使って複数の爆発音を同時に鳴らしています。

ボリュームの調整

audio要素には再生音のボリューム調整を行えるプロパティが用意されています。 このため、複数の効果音/BGMを使う場合にも、音量バランスを考慮した音声ファイルを作成する必要はありません。 各効果音/BGMの音量バランスはプログラムで再生時に調整できます。

また、ボリューム調整をプログラムが再生時に行える、ということは、再生音の大きさは状況に応じて変更できる、 という事も意味しています。

本章の最初に紹介した「小惑星撃退ゲーム」では、小惑星の大きさによって破壊時に再生される効果音の大きさは異なりますが、 この機能は、このボリュームプロパティを再生時に設定することで実現しています。