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

• ホーム
• Javascript,CSS,HTML,PHPのデザイン無料素材集
• Javascriptで指定した周波数の音を鳴らす ～AudioContext,oscillator

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

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

ソースコード

    <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>