JSFiddle - React, Tailwind, and code Playground

by Chinmay Pendharkar

HTML

<body>

<canvas id="spectrum"></canvas>

</body>

JavaScript

var initAudio, microphoneError, microphoneSuccess, pinkNoise;

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

window.requestAnimationFrame = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame);

microphoneError = function(event) {
  console.log("error")
  if (event.name === "PermissionDeniedError") {
    alert("This app requires a microphone as input. Please adjust your privacy settings.");
  }
};

microphoneSuccess = function(stream) {
  console.log("success")
  initAudio(stream);
};

pinkNoise = function(context) {
  console.log("starting pink noise")
  var b0, b1, b2, b3, b4, b5, b6, bufferSize, pinkNode;
  bufferSize = 4096;
  b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0.0;
  pinkNode = context.createScriptProcessor(bufferSize, 1, 1);
  pinkNode.onaudioprocess = function(e) {
    var i, output, white, _i, _results;
    output = e.outputBuffer.getChannelData(0);
    _results = [];
    for (i = _i = 0; 0 <= bufferSize ? _i < bufferSize : _i > bufferSize; i = 0 <= bufferSize ? ++_i : --_i) {
      white = Math.random() * 2 - 1;
      b0 = 0.99886 * b0 + white * 0.0555179;
      b1 = 0.99332 * b1 + white * 0.0750759;
      b2 = 0.96900 * b2 + white * 0.1538520;
      b3 = 0.86650 * b3 + white * 0.3104856;
      b4 = 0.55000 * b4 + white * 0.5329522;
      b5 = -0.7616 * b5 - white * 0.0168980;
      output[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
      output[i] *= 0.11;
      _results.push(b6 = white * 0.115926);
    }
  };
  pinkNode.connect(context.destination);
};


initAudio = function(stream) {
  console.log("init audio")
  var analyser, bufferLength, canvas, canvasElement, context, dataArray, draw, filterNode, height, sourceNode, width;

  canvasElement = document.getElementById("spectrum");
  width = 1000;
  height = 400;

  canvasElement.width = width;
 ...