//Creamos un nuevo AudioContext.
// Safary y Opera todavía necesitan el prefijo webkit
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audioBuffer, fuenteDeReproduccion;
var stop = true;
var tiempo = 0, progreso=0;//,porcien = 0;

function solicitarAudio(url) {
  var request = new XMLHttpRequest();

  request.open("GET",url, true);
  // el objeto arraybuffer se utiliza para almacenar datos binarios (archivos de sonido)
  request.responseType = "arraybuffer";
  // si hay respuesta
  request.onload = function() {
    audioCtx.decodeAudioData(request.response, function(buffer) {
      audioBuffer = buffer;
    });
  };

  //envía la solicitud
  request.send();
}

function reproducirAudio(progreso) {
    //1. crea la fuente de reproducción
    fuenteDeReproduccion = audioCtx.createBufferSource();
    // 2. establece la fuente de reproducción
    fuenteDeReproduccion.buffer = audioBuffer;
    // 3. Establece el valor de algunas propiedades
    // la propiedad playbackRate establece o devuelve la velocidad de reproducción del audio.
    fuenteDeReproduccion.playbackRate.value = 1;
    // 4. Conecta la fuente de reproducción con su destino ( altavoces, auriculares . . . etc )
    fuenteDeReproduccion.connect(audioCtx.destination);
    // 5. Inicia la reproducción
    fuenteDeReproduccion.start(audioCtx.currentTime, progreso);
}

function detenerAudio() {
    fuenteDeReproduccion.stop();
}

function audio(){  
  if (stop) {// si el audio está parado
    tiempo = audioCtx.currentTime - progreso;
    stop = false;
    boton.innerHTML = "||";//detener
    reproducirAudio(progreso);
  }else{// de lo contrario
    stop = true;
    boton.innerHTML = "▷";//reproducir
    detenerAudio();
  }
}

solicitarAudio(
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/Kevin_MacLeod_-_Camille_Saint-Sans_Danse_Macabre_-_Finale.mp3"
);

// Utiliza el evento click para iniciar o detener la reproducción
boton.addEventListener("click", audio, false);

progresoInput.addEventListener(
  "input",
  function() {
   if(stop == true) {progreso = this.value * audioBuffer.duration / 100;}
  },
  false
);

window.setInterval( function(){ 
 // si el audio se está reproduciendo
 if(stop == false){
  // calcula el progreso del audio en segundos
  progreso = audioCtx.currentTime - tiempo;
  // calcula el progreso del audio en porcientos
  var porcien = progreso * 100 / audioBuffer.duration;
  // visualiza el progreso del audio
  progresoInput.value = porcien;
 } 
  
 if(audioBuffer && audioCtx.currentTime - tiempo >= audioBuffer.duration){
    stop = true;
    boton.innerHTML = "▷"//reproducir
    progreso = 0;
 }
},1000/30);