//noprotect

​

// apologies for the horrible code, I was being lazy

​

// globalsFTW ¯\_(ツ)_/¯

let gainNode;

let context;

let audio;

let analyser;

let bufferLength;

let dataArray;

​

const updatePosition = (input, output) => () => {

  output.innerHTML = input.value;

  output.style.left = `calc(${(input.value - input.min) / (input.max - input.min) * 95}%)`;

}

​

function getAudio() {

  // create web audio api context

  context = new (window.AudioContext || window.webkitAudioContext)();

  // create Oscillator node

  const oscillator = context.createOscillator();

​

  oscillator.type = 'sine';

  oscillator.frequency.value = range.value; // value in hertz

  // oscillator.connect(audioCtx.destination);

  gainNode = context.createGain();

  // Connect the source to the gain node.

  oscillator.connect(gainNode);

  // Connect the gain node to the destination.

  gainNode.connect(context.destination);

​

  const fraction = parseInt(volume.value) / parseInt(volume.max);

  gainNode.gain.value = fraction * fraction;

  analyser = context.createAnalyser();

  gainNode.connect(analyser);

  bufferLength = analyser.frequencyBinCount;

  dataArray = new Uint8Array(bufferLength);

​

  analyser.fftSize = 1024;

  oscillator.start();

​

  return oscillator;

}

​

function draw() {

  requestAnimationFrame(draw);

  if (!analyser) {

    return;

  }

  ctx.clearRect(0, 0, WIDTH, HEIGHT);

  // analyser.getByteTimeDomainData(dataArray);

  analyser.getByteFrequencyData(dataArray);

​

  var barWidth = ((WIDTH) / bufferLength) * 1.5;

  var barHeight;

  var x = 0;

  for (var i = 0; i < bufferLength; i++) {

    barHeight = dataArray[i];

​

    ctx.fillStyle = 'rgb(3,169,244)';

    ctx.fillRect(x+.5,HEIGHT-barHeight/2+.5,barWidth,barHeight);

​

    x += barWidth + 1;

  }

}

​

​

const $$ = q => Array.from(document.querySelectorAll(q));

const $ = document.querySelector.bind(document);

​

//-----

​

const position = $('#range-value');

const range = $('#freq');

const updateFreq = updatePosition(freq, position);

range.oninput = () => {

  updateFreq();

  if (audio) audio.frequency.value = range.value; // value in hertz

}

updateFreq();

​

const vposition = $('#volume-value');

const volume = $('#volume');

const updateVolume = updatePosition(volume, vposition);

volume.oninput = () => {

  updateVolume();

  const fraction = parseInt(volume.value) / parseInt(volume.max);

​

  gainNode.gain.value = fraction * fraction;

}

updateVolume();

​

// button

const button = $('button');

let running = false;

button.onclick = function () {

  if (running) {

    audio.stop();

  } else {

    audio = getAudio();

  }

  running = !running;

}

​

// canvas

const canvas = $('canvas');

const ctx = canvas.getContext('2d');

const WIDTH = canvas.width = canvas.parentNode.offsetWidth;

const HEIGHT = canvas.height = canvas.parentNode.offsetHeight;

​

draw();