HTML5のaudio要素、メソッドとイベント

メモです。
HTML5のaudioを使ってみるの補助記事です。
HTML5の<audio>タグ対応のブラウザでのみ動きます。

 audio要素のメソッドを呼ぶ、イベントを拾う。

HTML5で用意されるaudio要素にはメソッドの呼び出し、イベントが用意されています。 以下のコードでは指定のコーデックが再生可能かどうかを調べ、サフィックス選択をしています。 再生後、終了イベントを取得し、１秒待って次のファイルを再生します。

---

<script type="text/javascript">
if( typeof Audio == "undefined" ) alert("このブラウザはaudio要素をサポートしません");
var audio   = new Audio(); // audio要素を生成する
var suffix  = audio.canPlayType("audio/mp3")!="" ? ".mp3" : //指定typeが再生可能か
              audio.canPlayType("audio/ogg")!="" ? ".ogg" :
              alert("ogg/mp3は再生できません");
var files   = ["uta","audioTagTst"];　// オーディオファイル名（サフィックス無し）
var f_idx   = 0;
var in_play = false;
function playAudio(){ // ファイル選択、再生
   if( !in_play ) return;
   f_idx = ++f_idx % files.length;
   audio.src = '../../../sound/'+files[f_idx]+suffix; // ソースを設定する
   audio.play();    // 再生を開始する
   }
function startPlay(){ // 再生開始
   in_play = true ;
   playAudio();
   }
function stopPlay(){ // 再生終了
   in_play = false;
   audio.pause();   // 再生を停止する
   }
function audioEnded(){ // 終了イベントを受ける関数
   if( in_play ) setTimeout(playAudio,1000); // １秒後にplayAudio()を呼び出す
   }
audio.addEventListener("ended",audioEnded,false); // 終了イベント処理関数設定 
</script>
<input type=button value="再生開始" onClick="startPlay()" />
<input type=button value="再生終了" onClick="stopPlay()" />

---

[再生開始] ボタンで再生が開始し、 [再生終了]ボタンで終了します。
２つのオーディオファイルを１秒の間隔をおいて繰り返し再生します。

オーディオファイルは../../../sound下に次の４つが用意されています。

audioTagTst.mp3	:	"audio-tagの試験です。mp3"
audioTagTst.ogg	:	"audio-tagの試験です。ogg"
uta.mp3	:	"歌も歌える"
uta.ogg	:	"歌も歌える"

audioTagTstはどちらが選択されたかわかるように"mp3","ogg"と喋らせています。
IE9とChromeではmp3,FireFox7とOperaではoggが選ばれます。audio要素を実装していない IE8以前のものやWindows版Safariではアラートが出ます。

canPlayType(mime-typemo文字列)は指定タイプの再生が可能かどうかを調べるメソッドです。 戻り値は文字列で

"" (空の文字列)	再生不能
"maybe"	再生可能（多分）
"probably"	再生可能

となっています。"maybe"と"probably"の差は良く分かりません。

ソースファイルは構築子new Audio(ソースファイル名)の形で指定するか、srcプロパティー に設定します。ソースファイルを指定しただけでは再生は始まらず、play()メソッドで 再生が開始します。stop()メソッドはありません。pause()メソッドで一時停止可能です。

終了イベントは"ended"という変な名前です。pauseイベントが"paused"でなく"pause"であったり とイベント名は通常のセンスと異なるものとなっています。ひょっとするとイベント名も 特許にひっかかったりするのでこんな変な名前にしてあるのでしょうか？困ったものです。

なお、ここで用いた音声ファイルは▲「ん」「な行」「ま行」と「が」音声合成試験のプログラムで生成したものです。

 補足

audio以外に関し補足すると、
・先頭のif( typeof Audio == "undefined" )はAudio要素の存在チェック
・setTimeout()はタイマー設定
・関数名start()はIE9では何かと衝突し、意味の全く分からないエラー
  関数を指定してください
 が出る。マイクロソフトのエラーメッセージは常に意味不明である

IE9でaudio要素を有効にするには次のmeta指定が必要です。
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 メソッド、イベント一覧

近々まとめます。ただ、上で使ったもの以外は現状HTML5として仕様が不安定で 避けた方が無難です。

 ＃＃＃

仕様というのは多かれ少なかれ気に入らない所はあるものですが、これほど どんどんと嫌いになっていく仕様も珍しい。

何と！
safariで<audio>を有効にするにはQuickTimeをインストールしないといけないらしい。
HTML5ならプラグインなしでオーディオが再生できるんじゃなかったのか?
「FlashをインストールしなくてもQuickTimeをインストールすればオーディオが再生できます」って？
意味が分からん。やっぱりHTML5は怪しすぎるよ。