Javascriptで指定した周波数の音を鳴らす ~AudioContext,oscillator

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

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


440Hz
1000Hz 2000Hz 4000Hz 8000Hz モスキート音(17000Hz)
ファ
音を鳴らす 音を止める

ソースコード

    <input type="range" value="440" max="18000" min="10" step="1" id="hz" style="max-width:100%;width:600px;"><br>
    <div id="hz_label">440Hz</div>
    <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(17000)" style="cursor:pointer;">モスキート音(17000Hz)</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>
    <br>
<script>
  var audioCtx = null,oscillator=null;
  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('play').addEventListener('click',function(){
      if(audioCtx==null){
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if(oscillator==null){
        oscillator = audioCtx.createOscillator();
        oscillator.type = 'square';
        let hz=document.getElementById('hz').value;
        oscillator.frequency.setValueAtTime(hz, audioCtx.currentTime);
        oscillator.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>