ホーム > カテゴリ > HTML5・JavaScript >

オシレータ(音の生成)とゲイン(音量) の設定 [Web Audio API]

Web Audio APIのオシレータ(発振回路)を使用して「サイン波、矩形波、のこぎり波、三角波」の音を生成します。周波数及び信号を増幅/減衰するゲイン(音量)の設定も可能です。

波形

周波数 440Hz
ゲイン
(信号の増幅/減衰)		 25%

※オシレータで生成している波形はこちらで確認できます。

ソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table>
  <tr>
    <th>波形</th>
    <td>
      <input type="radio" name="grp_option1" value="1" id="p_osc1" checked="checked"  onchange="play();"><label for="p_osc1">sine(サイン波)</label> 
      <input type="radio" name="grp_option1" value="2" id="p_osc2" onchange="play();"><label for="p_osc2">square(矩形波)</label><br> 
      <input type="radio" name="grp_option1" value="3" id="p_osc3" onchange="play();"><label for="p_osc3">sawtooth(のこぎり波)</label><br> 
      <input type="radio" name="grp_option1" value="4" id="p_osc4" onchange="play();"><label for="p_osc4">triangle(三角波)</label> 
    </td>
  </tr>
  <tr>
    <th>周波数</th>
    <td>
      <input type="range" id="range_Hz" min="1" max="3000" value="440" style="padding:0;width:150px;" onchange="play();"> <span id="msg_Hz">440Hz</span>
    </td>
  </tr>    
  <tr>
    <th>ゲイン<br>(信号の増幅/減衰)</th>
    <td>
      <input type="range" id="range_vol" min="0" max="100" value="25" style="padding:0;width:150px;" onchange="play();"> <span id="msg_vol">25%</span>
    </td>
  </tr>  
</table>
<button onclick="play();">実行する</button>
<button onclick="stop();">停止する</button>

<script>
// AudioContext
var audioCtx;
// オシレータ
var oscillator;
// ゲイン
var gain;

var firstflg = true;

function play(){

  stop();

  var range_vol = document.getElementById('range_vol').value;
  document.getElementById('msg_vol').innerHTML = parseInt(range_vol,10)+'%';    

  var range_Hz = document.getElementById('range_Hz').value;
  document.getElementById('msg_Hz').innerHTML = parseInt(range_Hz,10)+'Hz';   
    
  try{      
  
    if(firstflg){
      // AudioContextの生成
      audioCtx =  new AudioContext(); 
      firstflg = false;  
    }
    // 波形
    oscillator = audioCtx.createOscillator();
    if (document.getElementById("p_osc1").checked)oscillator.type="sine";
    if (document.getElementById("p_osc2").checked)oscillator.type="square";
    if (document.getElementById("p_osc3").checked)oscillator.type="sawtooth";
    if (document.getElementById("p_osc4").checked)oscillator.type="triangle"; 
    
    // 周波数
    oscillator.frequency.value = range_Hz;
     
    // ゲイン(音量)
    gain = audioCtx.createGain();
    gain.gain.value = range_vol /100;

    oscillator.connect(gain);
    gain.connect(audioCtx.destination);
    oscillator.start();    

  }catch(e){
    alert(e);
  }
} 

function stop(){  
  if(oscillator){
    oscillator.stop(); 
     
    gain.disconnect();
    oscillator.disconnect();
  }
}
</script>
</body>
</html>

参考サイト

AudioContext (MDN Web Docs)
OscillatorNode (MDN Web Docs)
GainNode (MDN Web Docs)





関連記事


前の記事：Webカメラ、USBマイクのテストと導入、初期設定 [WebRTC/Web Audio API]
次の記事：アナライザーで波形データと周波数スペクトルをオシロスコープのように描画する [Web Audio API]

公開日：2019年02月06日 最終更新日：2019年02月07日
記事NO：02725