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

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

文●古籏一浩

ツイートする

オーディオファイルの情報（メタデータ）

　まずはAudio Data APIの簡単な使い方から試してみましょう。指定したオーディオファイルの情報（メタデータ）を取得して表示するプログラムを作ります。Firefox 4のAudio Data APIは、Firefoxが標準でサポートしているOgg形式のオーディオファイルを処理できます（Wave形式など他のフォーマットは処理できません）。

　オーディオファイルはHTML5のaudio要素か、new Audio(url)としてURLを直接指定します。オーディオオブジェクトには以下のようなプロパティがあり、オーディオデータが読み込まれると発生するloadedmetadataイベントの処理でオーディオオブジェクトの各プロパティを参照し、メタデータを取得します。

mozChannels	チャンネル数。モノラルなら1、ステレオなら2
mozSampleRate	サンプリングレート。44.1kHzなら44100になる
mozFrameBufferLength	バッファのサイズ。単位はバイト

　実際のプログラムがサンプル1です。ボタンをクリックすると指定したオーディオファイルの情報がページ上に表示されます。

サンプル1の実行結果。あらかじめ指定したOgg形式のファイルの情報（メタデータ）が表示される

●サンプル1


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>情報（メタデータ）を表示</title> 
</head> 
<body>
<h1>情報（メタデータ）を表示</h1>
<div id="status">-</div> 
<form>
<input type="button" value="メタデータを表示" onclick="checkMetadata()" />
</form>
<script type="text/javascript"> 
function checkMetadata(){
    var audio = new Audio("myMusic.ogg");
    audio.addEventListener("loadedmetadata", function(event){
        var c = audio.mozChannels;  // チャンネルを取得
        var sr = audio.mozSampleRate; // サンプリングレートを取得
        var fb = audio.mozFrameBufferLength;    // フレームバッファ長を取得
        var txt = "チャンネル："+c+"<br>サンプリングレート："+sr+"<br>フレームバッファ長："+fb
        document.getElementById("status").innerHTML = txt;
    }, false);
}
</script> 
</body> 
</html>

　HTML5のFile APIを組み合わせると、ファイルダイアログで選択したローカルのオーディオファイルの情報を表示できます（サンプル2）。

サンプル2の実行結果。ファイルダイアログで選択したOgg形式のファイルの情報（メタデータ）が表示される

●サンプル2


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>選択したオーディオファイルの情報（メタデータ）を表示</title> 
</head> 
<body>
<h1>選択したオーディオファイルの情報（メタデータ）を表示</h1>
<div id="status">-</div> 
<form>
<input type="file" id="myFile" />
<input type="button" value="メタデータを表示" onclick="checkMetadata()">
</form>
<script type="text/javascript"> 
function checkMetadata(){
    var filename = document.getElementById("myFile").files[0].name;
    var audio = new Audio(filename);
    audio.addEventListener("loadedmetadata", function(event){
        var c = audio.mozChannels;  // チャンネルを取得
        var sr = audio.mozSampleRate; // サンプリングレートを取得
        var fb = audio.mozFrameBufferLength;    // フレームバッファ長を取得
        var txt = "チャンネル："+c+"<br>サンプリングレート："+sr+"<br>フレームバッファ長："+fb
        document.getElementById("status").innerHTML = txt;
    }, false);
}
</script> 
</body> 
</html>