Web Audio APIで任意の周波数の正弦波を鳴らす(HTML5/Javascript)

HTML5のWeb Audio APIを使って任意の周波数で正弦波を鳴らす電子音叉的なものを作ってみる。

HTML5のサウンド処理

HTML5ではこんな風にAudioタグを使って簡単に音を出す事が出来る。

<audio src="<オーディオファイル" contorols></audio>

1	<audio src="<オーディオファイル" contorols></audio>

Audioタグは簡単に使える反面、エフェクト等の音声処理の機能は無い。そのようなシーンにはWeb Audio APIを使えば良いようだ。

参考
・Web Audio API – Web API インターフェイス | MDN
・HTML5 の Web Audio API で音楽してみる | CYOKODOG

このあたりを参考にしつつ作成してみた。

完成品

周波数: Hz
音量:

ソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
  
  var ctx = new AudioContext();
  
  var bufferSize = 1024;
  var numberOfInputChannels = 1;
  var numberOfOutputChannels = 1;
  var node = ctx.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels);
  
  var gainNode = ctx.createGain();
  gainNode.gain.value = document.getElementById('vol').value;
  
  var step = 0.0;
  var frequency = 0;
  
  node.onaudioprocess = function(e) {
    var data = e.outputBuffer.getChannelData(0);
    
    for(var i = 0; i < data.length; i++) {
      data[i] = Math.sin(2 * Math.PI * step);
      step += frequency / ctx.sampleRate;
    }
  }
  
  $("#play").click(function() {
    frequency = document.getElementById('freq').value;
    node.connect(gainNode);
    gainNode.connect(ctx.destination);
 
  });
  
  $("#stop").click(function() {
    node.disconnect();
  });
  
  $("#vol").change(function(e) {
    gainNode.gain.value = this.value;
  });
  
});
</script>
</head>
<body>
周波数: <input id="freq" type="number" style="width:50px" min="20" max="20000" value="440" step="1" required>Hz
<br>
音量: <input id="vol" type="range" min="0" max="1" step="0.01" value="0.5">
<br>
<button id="play">play</button>
<button id="stop">stop</button>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

$(function() {

var ctx = new AudioContext();

var bufferSize = 1024;

var numberOfInputChannels = 1;

var numberOfOutputChannels = 1;

var node = ctx.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels);

var gainNode = ctx.createGain();

gainNode.gain.value = document.getElementById('vol').value;

var step = 0.0;

var frequency = 0;

node.onaudioprocess = function(e) {

var data = e.outputBuffer.getChannelData(0);

for(var i = 0; i < data.length; i++) {

data[i] = Math.sin(2 * Math.PI * step);

step += frequency / ctx.sampleRate;

}

$("#play").click(function() {

frequency = document.getElementById('freq').value;

node.connect(gainNode);

gainNode.connect(ctx.destination);

});

$("#stop").click(function() {

node.disconnect();

});

$("#vol").change(function(e) {

gainNode.gain.value = this.value;

});

</script>

</head>

<body>

周波数: <input id="freq" type="number" style="width:50px" min="20" max="20000" value="440" step="1" required>Hz

<br>

音量: <input id="vol" type="range" min="0" max="1" step="0.01" value="0.5">

<br>

</body>

</html>

近い内、レイアウトやアイコンのデザインを改良してメトロノームとかも合わせて作りたい。

Web Audio APIで任意の周波数の正弦波を鳴らす(HTML5/Javascript)

HTML5のサウンド処理

完成品

ソースコード

マウスの座標を表示する

HTML5/Javascriptで糸通し風アプリを作る

Javascriptで8パズル