How to fix nan: nan error with the duration of a song list?

0

I have several songs with these

<time id="reproducido1">00:00</time> / <time id="total1">00:00</time>
<time id="reproducido2">00:00</time> / <time id="total2">00:00</time>

and with javascript I take from the audio tag the duration of each song.

$( document ).ready(function() 
{

    var tiempototal1;
    var txttotal1;
    tiempototal1           = audio1.duration;
    txttotal1              = convierteSegundos(tiempototal1);
    document.getElementById("total1").innerHTML       = txttotal1; 

    var tiempototal2;
    var txttotal2;
    tiempototal2           = audio2.duration;
    txttotal2              = convierteSegundos(tiempototal2);
    document.getElementById("total2").innerHTML       = txttotal2; 

});


function convierteSegundos(segs) 
{
    var minutos;
    var segundos;
    var tiempo;
    minutos = Math.floor(segs/60);
    segundos = Math.floor(segs%60);
    if (minutos < 10) {
        minutos = "0" + minutos;
    }
    if (segundos < 10) {
        segundos = "0" + segundos;
    }
    tiempo = minutos + ":" + segundos;
    return tiempo;
}

But I get NAN: NAN in total1 and total2.

with the code of dev.joel I keep getting the error in the server in production in local works well its code. I have implemented it like this:

$( document ).ready(function() 
{

    var audio1 = new Audio();
    audio1.src = "mp3/ideas/amanece.mp3";
    audio1.addEventListener('loadedmetadata',function(e)
    {
        tiempototal1 = e.target.duration;
        console.log(tiempototal1);
    });



    var audio2 = new Audio();
    audio2.src = "mp3/ideas/escupitajo.mp3";
    audio2.addEventListener('loadedmetadata',function(e)
    {
        tiempototal2 = e.target.duration;
        console.log(tiempototal2);
    });

    var audio3 = new Audio();
    audio3.src = "mp3/ideas/estasjodido.mp3";
    audio3.addEventListener('loadedmetadata',function(e)
    {
        tiempototal3 = e.target.duration;
        console.log(tiempototal3);
    });



    var audio4 = new Audio();
    audio4.src = "mp3/ideas/estavida.mp3";
    audio4.addEventListener('loadedmetadata',function(e)
    {
        tiempototal4 = e.target.duration;
        console.log(tiempototal4);
    });

    var audio5 = new Audio();
    audio5.src = "mp3/ideas/lavalla.mp3";
    audio5.addEventListener('loadedmetadata',function(e)
    {
        tiempototal5 = e.target.duration;
        console.log(tiempototal5);
    });


    var audio6 = new Audio();
    audio6.src = "mp3/ideas/losmuertos.mp3";
    audio6.addEventListener('loadedmetadata',function(e)
    {
        tiempototal6 = e.target.duration;
        console.log(tiempototal6);
    });

    var audio7 = new Audio();
    audio7.src = "mp3/ideas/losmuertos.mp3";
    audio7.addEventListener('loadedmetadata',function(e)
    {
        tiempototal7 = e.target.duration;
        console.log(tiempototal7);
    });

    /*var audio8 = new Audio();
    audio8.src = "mp3/ideas/losmuertos.mp3";
    audio8.addEventListener('loadedmetadata',function(e)
    {
        tiempototal8 = e.target.duration;
        console.log(tiempototal8);
    });
*/

    //el resto del codigo inserta el tiempo total de cada cancion
    var tiempototal1;
    var txttotal1;
    //tiempototal1           = audio1.duration;

    //tiempototal1 = document.getElementById("audio1").duration;
    txttotal1              = convierteSegundos(tiempototal1);
    document.getElementById("total1").innerHTML       = txttotal1; 

    var tiempototal2;
    var txttotal2;
    //tiempototal2           = audio2.duration;

    //tiempototal2 = document.getElementById("audio2").duration;
    txttotal2              = convierteSegundos(tiempototal2);
    document.getElementById("total2").innerHTML       = txttotal2; 

    var tiempototal3;
    var txttotal3;
    //tiempototal3           = audio3.duration;
    //tiempototal3 = document.getElementById("audio3").duration;
    txttotal3              = convierteSegundos(tiempototal3);
    document.getElementById("total3").innerHTML       = txttotal3; 

    var tiempototal4;
    var txttotal4;
    //tiempototal4           = audio4.duration;
    //tiempototal4 = document.getElementById("audio4").duration;
    txttotal4              = convierteSegundos(tiempototal4);
    document.getElementById("total4").innerHTML       = txttotal4; 

    var tiempototal5;
    var txttotal5;
    //tiempototal5           = audio5.duration;
   // tiempototal5 = document.getElementById("audio5").duration;
    txttotal5              = convierteSegundos(tiempototal5);
    document.getElementById("total5").innerHTML       = txttotal5; 

    var tiempototal6;
    var txttotal6;
    //tiempototal6           = audio6.duration;
   // tiempototal6 = document.getElementById("audio6").duration;
    txttotal6             = convierteSegundos(tiempototal6);
    document.getElementById("total6").innerHTML       = txttotal6; 


    //console.log(audio1.duration);
    //tiempototal7           = audio7.duration;
    //tiempototal7 = document.getElementById("audio7").duration;
    txttotal7            = convierteSegundos(tiempototal7);
    document.getElementById("total7").innerHTML       = txttotal7; 
    
asked by Rafael Hernández 29.10.2016 в 03:04
source

1 answer

2

What is happening is that you do not load the metadatos which contains this information ( duration ), for this you have to add the event loadedmetadata to your Audio , for example:

$(document).ready(function() 
  {
  
    var tiempototal1;
    var tiempototal2;
    var txttotal1;
    var txttotal2;
    var audio1 = new Audio();
    
      audio1.src = "http://www.soundjay.com/button/beep-01a.mp3";
      audio1.addEventListener('loadedmetadata',function(e){
        tiempototal1 = e.target.duration*10;
        txttotal1 = convierteSegundos(tiempototal1);
        document.getElementById("total1").innerHTML  = txttotal1;
    });

      var audio2 = new Audio();
      audio2.src = "http://www.soundjay.com/button/beep-05.mp3";
      audio2.addEventListener('loadedmetadata',function(e){
        tiempototal2 = e.target.duration*10;
        txttotal2  = convierteSegundos(tiempototal2);
        document.getElementById("total2").innerHTML       = txttotal2;
      });
    });
    
function convierteSegundos(segs) 
{
    var minutos;
    var segundos;
    var tiempo;
    minutos = Math.floor(segs/60);
    segundos = Math.floor(segs%60);
    if (minutos < 10) {
        minutos = "0" + minutos;
    }
    if (segundos < 10) {
        segundos = "0" + segundos;
    }
    tiempo = minutos + ":" + segundos;
    return tiempo;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<time id="reproducido1">00:00</time> / <time id="total1">00:00</time>
<time id="reproducido2">00:00</time> / <time id="total2">00:00</time>
  

In some browsers duration does not work as it should, returning NaN as I mentioned.

    
answered by 29.10.2016 в 03:32