// variables para el audio
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analizador = audioCtx.createAnalyser();
analizador.fftSize = 128; // [32, 64, 128, 256, 512, 1024, 2048]
var dataArray = new Uint8Array(analizador.frequencyBinCount);
//  Inicializa el canvas
var canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
var cw = canvas.width = 700; // la anchura del canvas
var ch = canvas.height = 350;// la altura del canvas
ctx.fillStyle = "hsla(210,95%,45%,.75)";

// crea el array de los puntos
var puntos = [];
var pNum = 25;// número de puntos
var puntoW = cw / pNum;// calcula la distribución de los puntos 

  for (var i = 0; i < pNum + 1; i++) {
    var punto = {};
    punto.x = i * puntoW;
    punto.y = ch;
    puntos.push(punto);
  }


navigator.mediaDevices
  .getUserMedia({ audio: true, video: false })
  .then(function(stream) {
    var fuenteDeSonido = audioCtx.createMediaStreamSource(stream);
    fuenteDeSonido.connect(analizador);
    Animacion();
  }).catch(function(err) {
  txt("E R R O R")
});

function Animacion() {
  requestId = window.requestAnimationFrame(Animacion);
  /*el método getByteFrequencyData() toma como argumento un array de tipo Uint8Array*/
  analizador.getByteFrequencyData(dataArray);
  ctx.clearRect(0, 0, cw, ch);
  // la doble tilde (~~) es un operador equivalente a Math.floor() o casi
  var n = ~~(analizador.frequencyBinCount / pNum);
  // un bucle for calcula la coordenada en y de cada punto del array de puntos.
  for (var i = 0; i < puntos.length; i++) {
    puntos[i].y = ch - dataArray[i * n] - 50;
  }
  trazarCurvas(puntos);
  txt("Haz algo de ruido");
}

//Animacion();

function trazarCurvas(puntos) {
  ctx.beginPath();
  ctx.moveTo(puntos[0].x, puntos[0].y);
  
  for (var i = 1; i < puntos.length - 2; i++) {
     var x = (puntos[i].x + puntos[i + 1].x) / 2;
     var y = (puntos[i].y + puntos[i + 1].y) / 2;
    ctx.quadraticCurveTo(puntos[i].x, puntos[i].y, x, y);
  }
  ctx.quadraticCurveTo(
    puntos[i].x,
    puntos[i].y,
    puntos[i + 1].x,
    puntos[i + 1].y
  );  
  ctx.lineTo(cw, ch);
  ctx.lineTo(0, ch);
  ctx.closePath();
  ctx.fill();
}


function txt(mensaje) {
  var t = mensaje.split("").join(" ");
  ctx.font = "1.5em Lucida Console";
  ctx.textAlign="center";  
  ctx.fillText(t, cw*.5, ch*.5);
}