JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<input id="file" type="file">Select song</input>

CSS

#canvas {
  background-color: black;
   width: 400;
   height: 400;
}

JavaScript

let button = document.getElementById("file");
let audioCtx = new AudioContext();
let bufferSource, loaded = false;


button.onchange = (e) => {
	let reader = new FileReader();
  reader.readAsArrayBuffer(button.files[0]);
	reader.onload = function(ev) {
  	audioCtx.decodeAudioData(ev.target.result, function(buffer) {      
    	alert(buffer.duration)
		});
  };  
}