ちょっと事情がありまして、 Web ページ上で JavaScript を使って効果音を鳴らす方法を調べてみました。意外なことに、現状では標準化された方法がないんですね。埋め込みオブジェクトを使って BGM を鳴らすくらいはできるのですが、 JavaScript から任意のタイミングで効果音を鳴らすには、 Flash を組み合わせるくらいしか選択肢がないようです。

なんとかプラグインを使わずにやる方法はないかと探してみたところ、 Web Applications 1.0 仕様の中にあった Audio オブジェクトを使うことで、なんとか上記の目的を達成することができました。前置きが長くなりましたが、本日はこの Audio オブジェクトについてご紹介しようと思います。

残念なことに、現在のところ Audio オブジェクトをサポートしているのは Opera 9 だけのようで、 Firefox では最新の 2.0 Beta1 でも動作しませんでした。 IE はもちろん駄目です（＾＾；。 Firefox については将来的にサポートされると思いますが、 IE は期待薄ですね。そのようなわけで、本日の記事は現状では Opera 9 限定となってしまいます。ご了承くださいませ m(_ _)m

今回ご紹介する Audio オブジェクトは Web Applications 1.0 仕様で規定されている音声ファイル再生用の JavaScript オブジェクトです。効果音などの短いサウンドクリップの再生を目的にしており、 BGM のストリーミングなどには適さない、とされています。純粋な JavaScript オブジェクトなので、対応する HTML 要素などは存在しません。以下のように new 演算子で直接作成します。

var audio = new Audio("hogehoge.wav");

コンストラクタの引数には音声ファイルの URL を指定します。これは必須のようで、少なくとも Opera 9 は省略するとエラーになります。再生できる音声ファイルの種類は規定されていませんので、ブラウザ依存になると思います。仕様に掲載されている例では上記と同様に WAV ファイルを使っているので、 WAV 形式にするのが無難なのではないでしょうか。

Audio オブジェクトを作成したら、あとはそのメソッドを使って自由に音声ファイルを再生できます。現在の仕様では、主に以下の操作が可能です。

• 通常のワンショット再生
• ループ再生（ループ回数無限）
• ループ回数を指定したループ再生
• 再生の中断

現在のところ再生のポーズは規定されていません。注釈で追加することが示唆されているので、そのうちサポートされるでしょう（＾＾；。

それでは、 Audio オブジェクトの具体的な使用方法をご紹介していこうと思います。現在のところ Audio オブジェクトはそれほど多機能ではないので、使用方法もとてもシンプルです。

Audio オブジェクトは前述のように new 演算子で普通に作成します。コンストラクタは必ずひとつの引数を取り、再生する音声ファイルの URL を指定します。注意点は、ストリーミングを行うわけではないので、音声ファイルのダウンロードが終了するまでは再生ができないことです。 onload, onerror のイベントハンドラが使えますので、適切にハンドリングする必要があります。

var audio = new Audio("hogehoge.wav");
audio.onload = function() {
  // 再生処理など
}
audio.onerror = function() {
  // エラー処理
}

もちろん、これらは個々の Audio オブジェクトごとに処理する必要があります。音声ファイルが多い場合はちょっと工夫が必要かもしれませんね。

音声ファイルのダウンロードが完了すれば、あとの再生制御はとても簡単です。以下の 3 つのメソッドだけで再生・停止ができます。

play()

音声ファイルの再生を開始します。このメソッドで再生を開始した場合、音声ファイルの最後まで来ると自動的に再生を停止します。

stop()

音声ファイルの再生を停止します。

loop([回数])

指定された回数だけ音声ファイルをループ再生します。指定した回数のループが終了したら、自動的に再生を停止します。回数を省略した場合、エンドレスループになります。

簡単なのはいいのですが、あまり凝ったことはできそうにありませんね。とくに音量の調整ができないのが痛いところです。実際に Opera 9.1 に実装されている Audio オブジェクトのメンバをリストアップしてみたのですが、上記以外のメソッドは見つかりませんでした。今後の拡張に期待しましょう。

最後に、実例を挙げておきます。 Opera 9 で以下の「再生」ボタンを押すと、短い効果音が再生されるはずです。「停止」ボタンを押すと音が終わる前に再生を中止できます。実際に試していただけるとわかりますが、効果音が鳴っている間は「再生」ボタンを押しても重複して音を鳴らすことはできません。どうやら、ひとつの Audio オブジェクトで同時に鳴らせる効果音は 1 音に限られるようです。同じ音を重ねたい場合は複数のオブジェクトを作成して循環するような工夫が必要ですね。

上記サンプルで使っているサウンドデータは以下のサイトからいただきました。たくさんの素晴らしいフリー素材を公開されていて、たいへん有用なサイトだと思います。オーナー様に感謝です。
TAM Music Factory : http://www.tam-music.com/se.html

ソースは概ね以下のようになっています。

<script type="text/javascript">
var page = {
 
ready : false,
 
play : function()
{
  if(page.ready)
  {
    page.wav.play();
  }
},
 
stop : function()
{
  if(page.ready)
  {
    page.wav.stop();
  }
},
 
page.onload = function() // body 要素の on_load 属性から呼ばれる
{
  page.wav = new Audio('http://www.sourcewalker.com/blog_files/50855398/decide2.wav');
  page.wav.onload = function()
  {
    document.getElementById("page_play").disabled=false;
    document.getElementById("page_stop").disabled=false;
    page.ready = true;
  }
}
 
};
</script>
 
<p>
<input id="page_play" type="button" value="再生" onclick="page.play()" disabled="1"/>
<input id="page_stop" type="button" value="停止" onclick="page.stop()" disabled="1"/>
</p>

本日は Audio オブジェクトを使って JavaScript で音声ファイルを再生する方法をご紹介しました。この方法は PC よりも組み込み向けで有用かもしれませんね。現状では Opera の組み込み向けブラウザは Opera 8.5 ベースなので Audio オブジェクトはサポートされていないと思いますが（未確認）、 Opera 9 ベースになった暁には、それらの機器で簡単に効果音を再生する機能としての活用が期待されますね。