Audio Detect

by Lazaro Contreras

HTML

<input type="file"/>
<audio controls autoplay></audio>
<div id="o1"></div>
<div id="o2"></div>
<div id="o3"></div>
<div id="o33"></div>
<canvas class="visualizer" width="600" height="200">

CSS

*{
  margin:0;
  padding:0;
  cursor: default;
}
body{
  background:#222;
}
input{
  position:fixed;
  right:0;
  margin:auto;
	background: rgb(76, 142, 250);
	border: 0;
	border-radius: 2px;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font-size: .875em;
	padding: 10px 24px;
}
#o1{
	position:fixed;
	display:none;
  top:0;
  bottom:0;
	left:0;
	right:0;
	height:100px;
	width:100px;
	background:#333;
	margin:auto;
	border-radius: 50%;
}
#o2{
	position:fixed;
	display:none;
  top:0;
  bottom:0;
	left:0;
	right:0;
	height:100px;
	width:100px;
  margin:auto;
	background:#0074d9;
	border-radius: 50%;
}
#o3{
	position:fixed;
	display:none;
  top:0;
  bottom:0;
	left:0;
	right:0;
	height:100px;
	width:100px;
  margin:auto;
	background:#fff;
	border-radius: 50%;
}
#o33{
	position:fixed;
	display:none;
  top:0;
  bottom:0;
	left:0;
	right:0;
	height:100px;
	width:100px;
  margin:auto;
	background:red;
	border-radius: 50%;
}

JavaScript

window.onload = function(){
    var file = document.querySelector('input');
    file.onchange = function(e){
    var boton=e.target.files;
  	var archivo=boton[0];
  	if(!archivo.type.match(/audio/)){
  	  alert("Seleciona un audio, por favor.");
 		 }
     else {
    	var lector=new FileReader();
    	lector.readAsDataURL(archivo);
   		lector.addEventListener("load", initMp3Player, false);
  	}
    }
    function initMp3Player(e){
    	var result = e.target.result;
    	var audio = document.querySelector('audio');
      audio.src = result;
    	context = new AudioContext();
    	analyser = context.createAnalyser();
    	source = context.createMediaElementSource(audio);
    	source.connect(analyser);
    	analyser.connect(context.destination);
    	frameLooper();
    }
    
    var canvas = document.querySelector('.visualizer');
  var canvasCtx = canvas.getContext("2d");
  
    function frameLooper(){
    	window.requestAnimationFrame(frameLooper);
    	fbc_array = new Uint8Array(analyser.frequencyBinCount);
    	analyser.getByteFrequencyData(fbc_array);
      	document.querySelector('#o1').style.transform = 'scale('+((fbc_array[0] * fbc_array[0]/7500))+')';
      	document.querySelector('#o2').style.transform = 'scale('+((fbc_array[10] * fbc_array[10]/10000))+')';
        document.querySelector('#o2').style.background = 'rgb('+fbc_array[1]+', '+fbc_array[100]/50+', '+fbc_array[50]/.5+')';
      	document.querySelector('#o3').style.transform = 'scale('+((fbc_array[15] * fbc_array[15]/20000))+')';
        document.querySelector('#o33').style.transform = 'scale('+((fbc_array[20] * fbc_array[20]/25000))+')';
        
        canvasCtx.fillStyle = 'rgb(0, 30, 80)';
      canvasCtx.fillRect(0, 0, 600, 300);
      var barWidth = (300 / 1024) * 5;
      var barHeight;
      var x = 300;
      var y = 300;
      
        for(var i = 10; i < 1024; i++) {
        barHeight = ((fbc_array[i] + (fbc_array[i])) * fbc_array[i]/600) + 2;
        canvasCtx.fillStyle = 'rgb(0,' +...