JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<canvas id="canvas" width="1000" height="1000"></canvas>
<input class="input-file" type="file" id="file" accept="audio/*" />
<audio id="audio" controls></audio>

CSS

#file {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  opacity: 0.5;
}

audio {
  position: absolute;
  left: 10px;
  bottom: 0px;
  width: calc(100% - 40px);
  opacity: 0.3;
  margin: 0px 0px 5px 0px;
}

audio:hover, audio:active, audio:focus{
  opacity: 0.8;
  cursor: pointer;
  transition: 0.3s;
}

JavaScript

const canvas = document.getElementById("canvas");
const ctx  = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const button = document.getElementById("file");

const fftSize = 2048;
const spectrumSize = 128;
const radius = 100;

let fillEmblem = false;
let drawTicks = true;
let glow = false;
let lastTime = 0;
let loaded = false;

const midX = 0.5 * canvas.width;
const midY = 0.5 * canvas.height;

var analyzer;
var audio = document.getElementById("audio");
  
button.onchange = function() {
    var files = this.files;
    audio.src = URL.createObjectURL(files[0]);
    audio.load();
    audio.play();
    var context = new AudioContext();
    var src = context.createMediaElementSource(audio);
    analyser = context.createAnalyser();
    
    src.connect(analyser);
    analyser.connect(context.destination);
    analyser.fftSize = fftSize*2;
    loaded = true;
}
const fakeFrequencyBins = () => {
	 let bins = new Array(1024);
   for(var i = 0; i < fftSize; i++) {
    	bins[i] = Math.random() * 3;
   }
   return bins;
}

const setStyle = () => {
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1; 
  if(glow) {
    ctx.shadowColor = 'black';
    ctx.shadowBlur = 20;
  } else {
    ctx.shadowBlur = 0;
  }
}

const smooth = (array) => {
  var lastArray = array;
  for (var pass = 0; pass < 3; pass++) {
    var sidePoints = Math.floor(3 / 2); // our window is centered so this is both nL and nR
    var cn = 1 / (2 * sidePoints + 1); // constant
    var newArr = [];
    for (var i = 0; i < sidePoints; i++) {
      newArr[i] = lastArray[i];
      newArr[lastArray.length - i - 1] = lastArray[lastArray.length - i - 1];
    }
    for (var i = sidePoints; i < lastArray.length - sidePoints; i++) {
      var sum = 0;
      for (var n = -sidePoints; n <= sidePoints; n++) {
        sum += cn * lastArray[i + n] + n;
      }
      newArr[i] = sum;
    }
    lastArray = newArr;
  }
  return newArr;
}

const averageTransform = (array) => {
  var...