alisaing-sine.html (Source)

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="/assets/css/webaudio_style.css">
</head>

<body>

  <p><p>Pitch (Hz): <span id="oscillatorA_text"></span></p>
  <input type="range" min="1" max="50000" value="440" class="slider"   step="0.01"  oninput="set_osc_freq(this.value)">
</p>



<p><p>Output Gain: <span id="gain_text"></span></p>
<input type="range" min="0" max="1" value="0" class="slider"   step="0.01"  oninput="set_gain(this.value)">
</p>

<div class="scope-box">

  Time Domain:
  <p>
    <canvas id='scope' width=400 height=200></canvas>
  </p>

  Frequency Domain:
  <p>
    <canvas id='spectrum' width=400 height=200></canvas>
  </p>

</div>

</body>

<script type="text/javascript">

var context     = new AudioContext();

var oscillatorA = context.createOscillator();
var gain        = context.createGain();
var analyser    = context.createAnalyser();


oscillatorA.type = 'sine';
oscillatorA.frequency.setValueAtTime(180, context.currentTime);
oscillatorA.start();
oscillatorA.connect(gain);


gain.connect(context.destination);
gain.gain.value = 0;



analyser.fftSize = 2048;
gain.connect(analyser);

analyser.minDecibels = -120;
analyser.maxDecibels = 0;

var scopeCtx = document.getElementById('scope').getContext('2d');
var spectCtx = document.getElementById('spectrum').getContext('2d');

draw();

function draw() {
  drawSpectrum(analyser, spectCtx);
  drawScope(analyser, scopeCtx);

  requestAnimationFrame(draw);
}

function drawSpectrum(analyser, ctx) {
  var width = ctx.canvas.width;
  var height = ctx.canvas.height;
  var freqData = new Uint8Array(analyser.frequencyBinCount);
  var scaling = height / 256;

  analyser.getByteFrequencyData(freqData);

  ctx.fillStyle = 'rgba(256, 256, 256, 0.1)';
  ctx.fillRect(0, 0, width, height);

  ctx.lineWidth = 2;
  ctx.strokeStyle = 'rgb(0, 0, 0)';
  ctx.beginPath();

  for (var x = 0; x < width; x++)
  ctx.lineTo(x, height - freqData[x] * scaling);

  ctx.stroke();
}

function drawScope(analyser, ctx) {
  var width = ctx.canvas.width;
  var height = ctx.canvas.height;
  var timeData = new Uint8Array(analyser.frequencyBinCount);
  var scaling = height / 256;
  var risingEdge = 0;
  var edgeThreshold = 0.1;

  analyser.getByteTimeDomainData(timeData);

  ctx.fillStyle = 'rgba(256, 256, 256, 0.1)';
  ctx.fillRect(0, 0, width, height);

  ctx.lineWidth = 2;
  ctx.strokeStyle = 'rgb(0, 0, 0)';
  ctx.beginPath();

  // No buffer overrun protection
  while (timeData[risingEdge++] - 128 > 0 && risingEdge <= width);
  if (risingEdge >= width) risingEdge = 0;

  while (timeData[risingEdge++] - 128 < edgeThreshold && risingEdge <= width);
  if (risingEdge >= width) risingEdge = 0;

  for (var x = risingEdge; x < timeData.length && x - risingEdge < width; x++)
  ctx.lineTo(x - risingEdge, height - timeData[x] * scaling);

  ctx.stroke();
}




function set_osc_freq(y)
{
  oscillatorA.frequency.setValueAtTime(y, context.currentTime);
  var output = document.getElementById('oscillatorA_text');
  output.innerHTML = y;
}


function set_pre_gain(y)
{
  pre_gain.gain.value = y
}


function set_gain(y)
{
  gain.gain.value = y
}


</script>

</html>


Contents © Henrik von Coler 2021 - Contact