【javascript】Oscillatorを使って音を出してみよう

Oscillatorとは

javascriptには「WebAudio API」という技術があります。
WebAudio APIではブラウザ上で音を扱うための機能がたくさんあります。
今回作成するのはWebAudio APIの中の「Oscillator」というものを使用して、ブラウザ上で音を出力するサンプルです。

Oscillatorの生成

Oscillatorは「AudioContext」のインスタンスから生成します。

window.addEventListener( 'DOMContentLoaded', function( ){
  var audioCtx = new (window.AudioContext || window.webkitAudioContext )();
  var oscillator = audioCtx.createOscillator();
} );

これでは生成しただけなので音は出ませんが、この様に「AudioContext」からcreateOscillatorメソッドを使用して取得します。

Oscillatorによる音の出力

Oscillatorの生成で説明した通り、まずはAudioContextからOscillatorを取得します。
今回は440Hzの音（ラ音）を出力するために、Oscillator.frequencyに440Hzの値を設定します。
取得したOscillatorをAudioContext.destinationに接続してあげると、音を出力する準備が整います。
最後にstartメソッドを呼び出して音を出力し、stopメソッドで音の出力を止めます。

window.addEventListener( 'DOMContentLoaded', function( ){
  var audioCtx = new (window.AudioContext || window.webkitAudioContext )();

  var sample268Btn = document.querySelector( '#sample-268' );
  sample268Btn.addEventListener( 'click', function(){
    var oscillator = audioCtx.createOscillator();
    oscillator.frequency.value = 440;
    oscillator.connect( audioCtx.destination );
    oscillator.start();
    oscillator.stop( audioCtx.currentTime + 0.5 );
  } );
} );

※ボタンを押すと音が出ますのでご注意ください。
ラ
ここで気を付けたいのが、Oscillatorをstartしてstopして再度startする…事はできません。
ですので、ボタンを押すたびにOscillatorを生成してstartとstopを呼び出すようにしています。

サンプル

では音を出力する方法がわかったので、ピアノの鍵盤のサンプルを作ってみました。
鍵盤をクリックするとその音階の音が出力されます。

window.addEventListener( 'DOMContentLoaded', function( ){
  var audioCtx = new (window.AudioContext || window.webkitAudioContext )();

  var sample268Keys = document.querySelectorAll( '#keyboard-268 .key' );
  for( var i = 0; i < sample268Keys.length; i++ ){
    sample268Keys[ i ].addEventListener( 'click', function( e ) {
      var oscillator = audioCtx.createOscillator();
      var hz = e.target.dataset.hz || e.target.parentNode.dataset.hz;
      oscillator.frequency.value = hz;
      oscillator.connect( audioCtx.destination );
      oscillator.start();
      oscillator.stop( audioCtx.currentTime + 0.5 );
    } );
  }
} );

※音が出ますのでご注意ください。