JavaScript(+jQuery)でaudioタグあれこれ

B13の大矢です。えんもたけなわですね。
小ネタレベルではありますがタイトル通りJavaScriptでaudioタグを扱ってみたいと思います。jQueryも利便上用います。
今回、WEBアプリケーション等において様々な音声ファイルを流したい場合を想定していじってみたいと思います。実用性は謎です。

audioタグについて

html5から追加された音楽や音声などのオーディオが再生できるタグです（まんま）
タグを書く際にはaudioタグ内のsrc属性で音声ソースのアドレスを指定する事もできますが、ブラウザによって対応している形式が異なります。そのため、形式が違う複数のソースファイルを持たせたいのでhtmlを以下のように書きます。

このようにogg形式とmp3形式の同じ音声ファイルを揃えれば主要なブラウザには対応できるはずです。愛用のOperaで確認したらなんとmp3再生できませんでした！やっぱりOperaってク Opera最高！

例ではaudioタグにcontrols属性がついています。jsからでしか操作を行わない場合この属性は必要ありませんが、これの属性を付ける事でオーディオプレイヤーが表示されます。（ソース表示の都合上、controls属性に空の文字列が入ってしまっていますがこれは必要ありません）

このプレイヤーはブラウザによって異なります(画像はOperaのもの)。

audioタグの基本については以下のページを参考にすると良いと思います。対応形式の詳細なども見れます。

• audio - タグ/HTML/属性 : ASCII.jp HTMLリファレンス

JavaScriptでaudioタグをいじる

JavaScriptを使用してaudioタグをいじってみます。基本的な操作を列挙してみます。

var AudioTag = document.getElementById("AudioTag");

AudioTag.play(); //再生
AudioTag.load(); //読み込み
AudioTag.pause(); //一時停止
AudioTag.currentTime = 0; //再生時間をいじる(これは0秒に戻す)

動作を列挙しただけなので当たり前ですがマトモに動きません。jQueryによるID指定では直接叩けなかったのでgetElementByIdを用いています。

audioタグの音声ファイルを変更して再生する(jQueryを使用)

様々な音声ファイルを再生するにはaudioタグ内のsourceタグを入れ替える事で実現できます。jQueryを用いると実装が楽になるので使います。

var AudioTag = document.getElementById("AudioTag");

function soundPlay(fileName){
 $("#AudioTag source").remove(); //sourceタグの削除

 //指定したファイル名のmp3形式ファイルとogg形式ファイルを用意している想定でsourceタグを追加
 $("#AudioTag").prepend("");
 $("#AudioTag").prepend("");

 AudioTag.load(); //ファイルの読み込みを行う
 AudioTag.play();
}

指定されたファイル名の音声を読み込み、そのまま再生したい場合は上記のような例が考えられます。
sourceタグの追加や削除を行っただけでは変更した音声は反映されず、load操作が必要になります。また、loadを行った段階で音声再生の停止が行われます。
今回作った例は主に効果音の再生に適しています。音楽を流す場合などは再生ボタンなどを別機能として持たせると良さそうです。

audioタグの操作に関するもっと詳しい情報や動作の紹介は以下のページを参考にすると良いと思います。

• HTML5のvideo/audio＋JavaScript APIテクニック
• HTML5 Audio オブジェクトを JavaScript で制御する方法

拙い紹介でしたが、アイデアがあれば面白そうなものが作れそうだったので紹介してみました。今回紹介しませんでしたが、videoタグも同様にjsで制御できるようですのでメディアを扱って様々な変な物が作れそうですね。
ただ、いきなり音声が流れるのも困るので、作る物にもよりますが音声のオンオフ機能を付けたりする必要はありそうです。
最近趣味で変な物を作ってなかったのでこの記事を書いたのを機に何か作ってみようかなというやる気が湧いて来ました。