このページの本文へ

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です。ボタンをクリックすると指定したオーディオファイルの情報がページ上に表示されます。

【図】fig01.png

サンプル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>


この連載の記事

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

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

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