JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<input type='file' id='musicfile'/>
<button onclick='analyze()'>
Go!
</button>

JavaScript

var fileInput = document.getElementById('musicfile');
var context = new window.AudioContext();

function analyze() {
	var musicFile = fileInput.files[0];
  
  if (musicFile === undefined) return;
  
  var musicReader = new FileReader();
  musicReader.onload = function() {
  	context.decodeAudioData(this.result,
    	function(decodedArrayBuffer) {
      	makePlayer(decodedArrayBuffer);
    	}, function(e) {
      	console.log('Error decoding file', e);
    });
  };
  musicReader.readAsArrayBuffer(musicFile);
}

function makePlayer(musicBuffer) {
	var musicAnalyser = context.createAnalyser();
  
  var fFrequencyData = new Float32Array(analyser.frequencyBinCount);
	var bFrequencyData = new Uint8Array(analyser.frequencyBinCount); 
	var bTimeData = new Uint8Array(analyser.frequencyBinCount);
  
  analyser.getFloatFrequencyData(fFrequencyData); 
	analyser.getByteFrequencyData(bFrequencyData); 
	analyser.getByteTimeDomainData(bTimeData);
  
  console.log(fFrequencyData)
}