JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  	<head>
		  <meta charset=utf-8>
		  <link rel="stylesheet" href="styles.css">
  		<title>Party Planet</title>
  	</head>
  
	<body style="margin: 0;">
		<div id="overlay">
			<script src="https://threejs.org/build/three.js"></script>
			<script src="main.js" id="main"></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>
	</body>
</html>

CSS

#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);
		
		reader.addEventListener('load', function (event){

			var buffer = event.target.result;
	
			var context = THREE.AudioContext.getContext();
			context.decodeAudioData(buffer, function(audioBuffer){
	
				listener = new THREE.AudioListener();
				camera.add(listener);

				sound = new THREE.Audio(listener);
				sound.setBuffer(audioBuffer);
				sound.setLoop(true);
				sound.setVolume(0.5);
				
				console.log("Sound = " + sound);
				analyser = new THREE.AudioAnalyser(sound, 128);
			} );	
		} );
	}
}

function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
   ...