JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay">
  <script src="https://threejs.org/build/three.js"></script>
  <label for="audioInput">Browse File...</label>
  <input type="file" class="file" id="audioInput" accept="audio/*" />
  <div style="width:500px; margin:auto; position:relative">
    <audio controls id=audioControls> </audio>
  </div>
</div>

CSS

body {
	margin: 0;
}

#overlay {
	position: absolute;
	min-width: 100%;
	min-height: 100vh;
}

#audioControls{
	position: absolute;
	width: 100%;
	top: 80vh;
    border-radius: 90px;
	transform: scale(1.05);
}

#audioInput{
	position: absolute;
	width: 50%;
	left: 50%;
	opacity:0;
}

label{
	position: absolute;
	cursor: pointer;
	color:rgb(255,255,0);
	top: 88vh;
	left: 46vw;
}

#main{
	height: 10vh;
}

JavaScript

var camera, scene, renderer, light;
var sphereGeometry, sphereMaterial, sphere;
var input, output, audioControls, audioFile, audioSource, data, sound;
var analyser;
var data;

function init(){
	var width = window.innerWidth;
	var height = window.innerHeight;
	var viewAngle = 45;
	var nearClipping = 0.1;
	var farClipping = 9999;
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( viewAngle, width / height, nearClipping, farClipping );
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( width, height );
	document.body.appendChild(renderer.domElement);

	var audioFile = null;
	var input;
	var audio;
	var data = null;
	var audioSource;

	//Create the sphere and add it to the scene
	sphereGeometry = new THREE.SphereGeometry(window.screen.height/1000, 8, 8);
	sphereMaterial = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
	sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
	sphere.position.z = -5;
	scene.add(sphere);

	//Create a light source and add it to the scene
	light = new THREE.PointLight(0xFFFFFF);
	light.position.x = 0;
	light.position.y = 0;
	light.position.z = 10;
	scene.add(light);
}


function loadAudio(){

	input.onchange = function() {
		
		var reader = new FileReader();

		var file = input.files[0];
		reader.readAsArrayBuffer( file );
		
		audioControls.src = URL.createObjectURL(file);
		console.log("file = " + file);
		
		listener = new THREE.AudioListener();
		
		sound = new THREE.Audio(listener);
		sound.setMediaElementSource( audioControls );
		
		analyser = new THREE.AudioAnalyser(sound, 128);

	}
}

function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {

	sphere.rotation.y += 0.005;
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
	
	input = document.getElementById("audioInput");
	audioControls =...