MozAudioAvailableイベントを捕捉する
次に、再生中のオーディオファイルの再生時間（再生されている時間）を取得してみましょう。Audio Data APIでは再生中にMozAudioAvailableイベントが発生するので、このMozAudioAvailableイベントを捕捉してイベントハンドラ内で現在の再生時間を取得します。イベントハンドラにはイベントオブジェクトが渡され、イベントオブジェクトのtimeプロパティに再生時間が入ります。
実際のプログラムがサンプル3です。MozAudioAvailableイベントが発生したら現在の再生時間をページ上に表示します。サンプル3では併せてイベントが発生した回数を()内に表示しています。
サンプル3の実行結果。MozAudioAvailableイベントの発生回数はtimeupdateイベントよりも多い
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>再生時間を表示</title>
</head>
<body>
<h1>再生時間を表示</h1>
<div id="status">-</div>
<form>
<input type="button" value="再生開始" onclick="startAudio()">
</form>
<script type="text/javascript">
var count = 0; // 何回イベントが発生したか
function startAudio(){
var audio = new Audio("myMusic.ogg");
audio.addEventListener("MozAudioAvailable", function(event){
count++;
var t = event.time; // 再生時間を取得
document.getElementById("status").innerHTML = "("+count+")"+t;
}, false);
count = 0;
audio.play();
}
</script>
</body>
</html>
オーディオの再生時間はHTML5 AudioのcurrentTimeプロパティでも調べられます（関連記事）。currentTimeプロパティを使って再生時間とイベント発生回数を表示したのがサンプル4です。サンプル3とサンプル4での実行結果を比べると分かりますが、MozAudioAvailableイベントの方が発生回数が多く、より細かい間隔でオーディオ処理を実行できます。
MozAudioAvailableの発生回数の目安は「サンプリングレート×チャンネル数÷バッファサイズ」です。各チャンネルのデータはeventオブジェクトのframeBuffer配列に格納されており、event.frameBuffer[0]、event.frameBuffer[1]のようにして各チャンネルのデータにアクセスできます。
サンプル4の実行結果。timeupdateイベントの発生回数は少ない
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>再生時間を表示(timeupdate)</title>
</head>
<body>
<h1>再生時間を表示(timeupdate)</h1>
<div id="status">-</div>
<form>
<input type="button" value="再生開始" onclick="startAudio()">
</form>
<script type="text/javascript">
var count = 0; // 何回イベントが発生したか
function startAudio(){
var audio = new Audio("myMusic.ogg");
audio.addEventListener("timeupdate", function(event){
count++;
var t = audio.currentTime; // 再生時間を取得
document.getElementById("status").innerHTML = "("+count+")"+t;
}, false);
count = 0;
audio.play();
}
</script>
</body>
</html>
