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

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

文●古籏一浩

ツイートする

特定の周波数の音を出力する

　続いて、特定の周波数の音を出力してみましょう。Audio Data APIでは以下のような手順で特定の周波数の音を出力できます。

　まず、new Audio()としてオーディオオブジェクトを作成します。このとき、オーディオファイルのURLは指定しません。次に、出力する音のチャンネル数とサンプリングレートをmozSetup()メソッドに指定します。たとえばチャンネル数が「2」でサンプリングレートが「44.1kHz」であれば mozSetup(2, 44100) と指定します。

　チャンネルとサンプリングレートの設定が終わったら、配列にオーディオデータを作成します。new Array()として配列を生成した場合、どのような型（文字、数値）になるか分かりません。そこで必ず32ビット浮動小数値の要素を生成する専用のFloat32Array配列オブジェクトを使います。配列のサイズは出力する音の秒数（ミリ秒）です。1秒の長さの音であれば1000ミリ秒ですので、new Float32Array(1000)と指定します。

　次に、配列に音のデータを入れます。基本的な正弦波（サイン波）であればMath.sin()を使って生成します。Math.sin()に指定する引数はラジアン表記です。ラジアンは360度であれば2πになりますので、JavaScriptでは2 * Math.PIとなります。この2πに出力する周波数を乗算すると音の振動数となり、サンプリングレートで除算した値を変数に入れます。あとは、配列の要素数（＝秒数）だけMath.sin()を使って正弦波（サイン波）の値を入れていきます。音量を調整したい場合は2 * Math.sin(～)のようにして振幅を計算します。

　作成した配列データをmozWriteAudio()メソッドの引数に指定します。作成した音のデータはこれまでと同様にplay()メソッドを使って出力します。

　実際のプログラムはサンプル5です。ボタンをクリックすると440Hzの音（ラの音階）が鳴ります。サンプル6はボタンをクリックするとさまざまな音を再生できます。

サンプル5の画面。ボタンをクリックすると1秒間だけ440Hzの音が出力される

サンプル6の画面。ボタンをクリックすると対応した周波数の音が出力される

●サンプル5


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>指定した周波数を出力</title> 
</head> 
<body>
<h1>指定した周波数を出力</h1>
<form>
<input type="button" value="440Hzの音を出力" onclick="startAudio()" />
</form>
<script type="text/javascript"> 
function startAudio(){
  var freq = 440;  // 440Hz
  var sampleRate = 44100;  // 44.1kHz
  var audio = new Audio();
  audio.mozSetup(1, sampleRate); // 1ch, 44kHz
  var bufferSize = sampleRate * 1;  // 1000ms
  var data = new Float32Array(bufferSize);
  var k = 2* Math.PI * freq / sampleRate;
  for(var i=0; i<data.length; i++){
    data[i] = Math.sin(k * i);
  }
  audio.mozWriteAudio(data);
  audio.play();
}
</script> 
</body> 
</html>

●サンプル6


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>指定した周波数を出力2</title> 
</head> 
<body>
<h1>指定した周波数を出力2</h1>
<form>
<input type="button" value="440Hz" onclick="startAudio(440)" /><br />
<input type="button" value="494Hz" onclick="startAudio(494)" /><br />
<input type="button" value="554Hz" onclick="startAudio(554)" /><br />
<input type="button" value="587Hz" onclick="startAudio(587)" /><br />
<input type="button" value="659Hz" onclick="startAudio(659)" /><br />
<input type="button" value="740Hz" onclick="startAudio(740)" /><br />
<input type="button" value="831Hz" onclick="startAudio(831)" /><br />
<input type="button" value="880Hz" onclick="startAudio(880)" /><br />
</form>
<script type="text/javascript"> 
function startAudio(freq){
  var sampleRate = 44100;  // 44.1kHz
  var audio = new Audio();
  audio.mozSetup(1, sampleRate); // 1ch, 44kHz
  var bufferSize = sampleRate * 1;  // 1000ms
  var data = new Float32Array(bufferSize);
  var k = 2* Math.PI * freq / sampleRate;
  for(var i=0; i<data.length; i++){
    data[i] = Math.sin(k * i);
  }
  audio.mozWriteAudio(data);
  audio.play();
}
</script> 
</body> 
</html>