// variables para el audio
  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  var audio, analizador, fuenteDeReproduccion, dataArray;
  // variables para el canvas
  var canvas = document.querySelector("canvas"); 
  var ctx = canvas.getContext("2d");
  var cw = canvas.width = 700;
  var ch = canvas.height = 300;
  ctx.fillStyle = "white";

// A U D I O 

// el evento onchange se dispara cuando cambia el valor de un elemento <input> <select> o <textarea>
audiofile.addEventListener("change", function(event) {
  // si se trata de un archivo de sonido
  if(event.target.files[0].type.search("audio") == 0){
  // crea un nuevo elemento <audio> que no pertenece al DOM
  audio = new Audio();
  // y cuya fuente ( src ) es el URL blob del audio escogido por el usuario
  audio.src = URL.createObjectURL(event.target.files[0]); //console.log(audio)
  // utilizamos el evento media "ended" para detectar cuando se acaba la reproducción del sonido
  audio.addEventListener(
    "ended",
    function() {
      if (requestId) {
        // para parrar la animación
        window.cancelAnimationFrame(requestId);
        // limpiar el canvas
        ctx.clearRect(0, 0, cw, ch);
        // y cambiar el display de label a "block", ya que durante la animación el valor de la propiedad display de la etiqueta es "none"
        label.style.display = "block";
    
    
        // Si selectamos el mismo archivo dos veces seguidos, la segunda vez el evento "onchange" de input[type=file] no se dispara. No pasa lo mismo si la segunda vez cargamos otro archivo. Para que esto no pase tenemos que restablecer ( reset ) el formulario: 
        form.reset();
      }
    },
    false
  );
    
    
  
  // utilizamos el evento media "canplay" para detectar si archivo de sonido puede ser reproducido.
  audio.addEventListener("canplay", function() {
    // si puede reproducirse, cambiamos el display de label a "none". La etiqueta ( <label> ) ya no está visible
    label.style.display = "none";
    
    // crea un nuevo analizador
    analizador = audioCtx.createAnalyser();
    analizador.fftSize = 256; // [32, 64, 128, 256, 512, 1024, 2048]
    dataArray = new Uint8Array(analizador.frequencyBinCount);
    // el método createMediaElementSource se utiliza para crear una nueva fuente de reproducción si hay un elemento <audio> o <video> que puede reproducirse.
    fuenteDeReproduccion = audioCtx.createMediaElementSource(audio);
    // conecta la fuente de reproducción con el analizador
    fuenteDeReproduccion.connect(analizador);
    // y el analizador con el dispositivo de destino.
    analizador.connect(audioCtx.destination);
    // reproduce el audio
    audio.play();
    // y llama la función que genera la animación
    Animacion();
  });
  }// if type audio cond.
});
  

function Animacion() {
    requestId = window.requestAnimationFrame(Animacion);
    ctx.clearRect(0, 0, cw, ch);
    analizador.getByteTimeDomainData(dataArray);
    // alternativamente puede utilizar el método getByteFrequencyData
    
    // utiliza un bucle for ( for loop ) para leer los datos de dataArray y dibujar un pequeño circulo para cada elemento del array
    for (var i = 0; i < dataArray.length; i += 1) {
      // calcula la posición y tamaño de cada circulo
      var w = cw/dataArray.length;
      var x = i * w;
      var y = ch - dataArray[i];
      // dibuja el circulo
      ctx.beginPath();
      ctx.arc(x,y,(w-1)/2,0,2*Math.PI);
      ctx.fill();
   }
}