JSFiddle - React, Tailwind, and code Playground

by Eric Time

HTML

<audio id="audio" src="http://7bvaim.com1.z0.glb.clouddn.com/lvnPXXGJMiokjaIgFOlXyQJAOLqo" controls="true"></audio>
	<canvas id="canvas" width="500" height="600" style="display:block"></canvas>

JavaScript

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
		var analyser = audioCtx.createAnalyser();
		var audio  = document.querySelector('#audio');
		var canvas = document.querySelector('#canvas');
		var canvasCtx = canvas.getContext('2d');
		source = audioCtx.createMediaElementSource(audio);
		source.connect(analyser);
		analyser.connect(audioCtx.destination);
		var ffsize = 64;
		analyser.fftSize = ffsize;
		var bufferLength = analyser.frequencyBinCount;
		var dataArray = new Uint8Array(bufferLength);
		var dataArray2 = new Uint8Array(bufferLength);
		var moving;
		var width = canvas.width;
		var height = canvas.height;
		canvasCtx.fillStyle = '#FFFFFF';
		canvasCtx.lineWidth = width/bufferLength;
		
		var frames = 0;
		var setp = 4;
		for(var i = 0;i<dataArray.length;i++){
			dataArray[i] = height/2;
		};
		var colors = {start:[38,91,153],end:[96,171,229]};

		function easeinout(a){
			if(1==a)return 1;if(0==a)return 0;var b=.48-a/1.04,c=Math.sqrt(.1734+b*b),d=c-b,e=Math.pow(Math.abs(d),1/3)*(0>d?-1:1),f=-c-b,g=Math.pow(Math.abs(f),1/3)*(0>f?-1:1),h=e+g+.5;return 3*(1-h)*h*h+h*h*h;
		}

		function getColor(point,length){
			var color = [];
			for(var i = 0;i<3;i++){
				color[i] = Math.floor((colors.end[i] - colors.start[i])*point/length)+colors.start[i];
			}
			return 'rgb('+color.join(',')+')';
		};

		function draw(){
			frames += 1;
			if(frames == setp){
				for(var i  = 0;i<dataArray.length;i++){
					dataArray[i] = dataArray2[i];
				};
				analyser.getByteTimeDomainData(dataArray2);
				frames = 0;
			}
			
			canvasCtx.fillRect(0, 0, width, height);

			var sliceWidth = width / bufferLength;
			var x = 0;
			var lastX,lastY;

			for(var i = 0; i < bufferLength; i++) {
				var progress = frames/setp;
				var v = (dataArray[i] + (dataArray2[i]-dataArray[i])*easeinout(progress))/186.0;
				var len = v * height/2;
				canvasCtx.beginPath();

				//canvasCtx.strokeStyle = getColor(i,bufferLength);
				var...