このページの本文へ

Firefoxでソフトシンセも作れるAudio Data APIの使い方 (3/5)

2010年10月26日 10時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

MozAudioAvailableイベントを捕捉する

 次に、再生中のオーディオファイルの再生時間(再生されている時間)を取得してみましょう。Audio Data APIでは再生中にMozAudioAvailableイベントが発生するので、このMozAudioAvailableイベントを捕捉してイベントハンドラ内で現在の再生時間を取得します。イベントハンドラにはイベントオブジェクトが渡され、イベントオブジェクトのtimeプロパティに再生時間が入ります。

 実際のプログラムがサンプル3です。MozAudioAvailableイベントが発生したら現在の再生時間をページ上に表示します。サンプル3では併せてイベントが発生した回数を()内に表示しています。

サンプル3の実行結果。MozAudioAvailableイベントの発生回数はtimeupdateイベントよりも多い

サンプル3


<!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]のようにして各チャンネルのデータにアクセスできます。

【図】fig06.png

サンプル4の実行結果。timeupdateイベントの発生回数は少ない

サンプル4


<!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>


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く