JavaScriptで音を鳴らす｜OscillatorNodeを使った周波数設定と再生方法

JavaScriptで音を鳴らしたいけれど、どの方法を使えばいいか迷っていませんか？
この記事では、AudioContextとOscillatorNodeを使って、特定の周波数の音を生成・再生する方法を詳しく解説します。

周波数を設定して「音を鳴らす」ボタンを押すと音が鳴ります

音量に注意して鳴らして下さい。最初は小さい音に設定してから少しずつ大きくすることをお勧めします。
スピーカーによって高周波数の音が鳴らない場合があります。
パソコンのキーボードで演奏したい場合はこちら

周波数：

440Hz

音量：

1000Hz 2000Hz 4000Hz 8000Hz 12000Hz
ドレミファソラシド
音を鳴らす音を止める

ソースコード

<div style="display:flex;"><div>周波数：</div><div id="hz_label">440Hz</div></div>
<input type="range" value="440" max="12000" min="10" step="1" id="hz" style="max-width:100%;width:600px;"><br>
<div style="display:flex;"><div>音量：</div><div id="vol_label">5</div></div>
<input type="range" value="5" max="100" min="1" step="1" id="vol" style="max-width:100%;width:600px;"><br>
<a onclick="setHz(1000)" style="cursor:pointer;">1000Hz</a>
<a onclick="setHz(2000)" style="cursor:pointer;">2000Hz</a>
<a onclick="setHz(4000)" style="cursor:pointer;">4000Hz</a>
<a onclick="setHz(8000)" style="cursor:pointer;">8000Hz</a>
<a onclick="setHz(12000)" style="cursor:pointer;">12000Hz</a>
<br>
<a onclick="setHz(261)" style="cursor:pointer;">ド</a>
<a onclick="setHz(294)" style="cursor:pointer;">レ</a>
<a onclick="setHz(330)" style="cursor:pointer;">ミ</a>
<a onclick="setHz(349)" style="cursor:pointer;">ファ</a>
<a onclick="setHz(392)" style="cursor:pointer;">ソ</a>
<a onclick="setHz(440)" style="cursor:pointer;">ラ</a>
<a onclick="setHz(494)" style="cursor:pointer;">シ</a>
<a onclick="setHz(522)" style="cursor:pointer;">ド</a>
<br>
<a onclick="" style="cursor:pointer;" id="play">音を鳴らす</a>
<a onclick="" style="cursor:pointer;" id="stop">音を止める</a>
<script>
  var audioCtx=null,oscillator=null,gainNode=null,vol=5;
  window.addEventListener('DOMContentLoaded',function(){

    //周波数変更
    document.getElementById('hz').addEventListener('input',function(){
      document.getElementById('hz_label').innerHTML=document.getElementById('hz').value+'Hz';
      if(oscillator!=null){
        let hz=document.getElementById('hz').value;
        oscillator.frequency.setValueAtTime(hz, audioCtx.currentTime);
      }
    });
    //音量変更
    document.getElementById('vol').addEventListener('input',function(){
      document.getElementById('vol_label').innerHTML=document.getElementById('vol').value;
      vol=document.getElementById('vol').value;
      if(gainNode!=null){
        gainNode.gain.value=vol/100;
      }
    });
    //音を鳴らす
    document.getElementById('play').addEventListener('click',function(){
      if(audioCtx==null){
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if(gainNode==null){
        gainNode = audioCtx.createGain();
        gainNode.gain.value=vol/100;
      }
      if(oscillator==null){
        oscillator = audioCtx.createOscillator();
        oscillator.type = 'sine';
        let hz=document.getElementById('hz').value;
        oscillator.frequency.setValueAtTime(hz, audioCtx.currentTime);
        oscillator.connect(gainNode).connect(audioCtx.destination);
        oscillator.start();
      }
    });
    //音を止める
    document.getElementById('stop').addEventListener('click',function(){
      if(oscillator!==null){
        oscillator.stop();
        oscillator=null;
      }
    });
  });
  function setHz(hz){
    document.getElementById('hz').value=hz;
    document.getElementById('hz_label').innerHTML=hz+'Hz';
      if(oscillator!=null){
        let hz=document.getElementById('hz').value;
        oscillator.frequency.setValueAtTime(hz, audioCtx.currentTime);
      }
  }
</script>