Duración del reproductor de audio HTML5 que muestra Nan

Question

Acabo de empezar a aprender HTML5 y estaba pasando por el reproductor de audio HTML5 con JQuery. Codifiqué un reproductor con la lista de reproducción, todo funciona bien, excepto la duración con la ayuda de la cual mi deslizador de rango de entrada no funciona. Cuando depuré, descubrí que mi duración me muestra NAN. Estoy configurando la duración después de que la canción se inicializa.

Aquí está mi código JS

jQuery(document).ready(function() { 

    container = $('.container'); 
    playList = $('#playlist'); 
    playListSong = $('#playlist li'); 
    cover = $('.cover'); 
    play = $('#play'); 
    pause = $('#pause'); 
    mute = $('#mute'); 
    muted = $('#muted'); 
    close = $('#close'); 

    song = new Audio('music/Whistle-Flo-Rida-Mp3-Download.mp3','music/Whistle-Flo-Rida-Mp3-Download.mp3'); 

    var canPlay = song.canPlayType('audio/mpeg;'); 
    if (canPlay) { 
     song.type= 'audio/mpeg'; 
     song.src= 'music/Whistle-Flo-Rida-Mp3-Download.mp3'; 
    } 

    playListSong.click(function(){ 

     $('#close').trigger('click'); 
     window["song"] = new Audio('music/'+$(this).html()+'.mp3','music/'+$(this).html()+'.mp3'); 

     $('#play').trigger('click'); 

    }); 

    play.live('click', function(e) { 

     e.preventDefault(); 
     song.play(); 
     //cover.attr("title", song.duration); 
     $(this).replaceWith('<a class="button gradient" id="pause" href="" title=""><span>k</span></a>'); 

     $('#close').fadeIn(300); 
     $('#seek').attr('max',song.duration); 
    }); 

    pause.live('click', function(e) { 
     e.preventDefault(); 
     song.pause(); 
     $(this).replaceWith('<a class="button gradient" id="play" href="" title=""><span>d</span></a>'); 

    }); 

    mute.live('click', function(e) { 
     e.preventDefault(); 
     song.volume = 0; 
     $(this).replaceWith('<a class="button gradient" id="muted" href="" title=""><span>o</span></a>'); 

    }); 

    muted.live('click', function(e) { 
     e.preventDefault(); 
     song.volume = 1; 
     $(this).replaceWith('<a class="button gradient" id="mute" href="" title=""><span>o</span></a>'); 

    }); 

    $('#close').click(function(e) { 
     e.preventDefault(); 
     container.removeClass('containerLarge'); 
     cover.removeClass('coverLarge'); 
     song.pause(); 
     song.currentTime = 0; 
     $('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""><span>d</span></a>'); 
     $('#close').fadeOut(300); 
    }); 



    $("#seek").bind("change", function() { 
     song.currentTime = $(this).val(); 
     $("#seek").attr("max", song.duration); 
    }); 

    song.addEventListener('timeupdate',function(){ 
     curtime = parseInt(song.currentTime, 10); 
     $("#seek").attr("value", curtime); 
    }); 

}); 

Cuando hago clic en la canción lista de reproducción, la duración es siempre NAN pero por defecto, he puesto una canción, y directamente al cargar la página cuando hace clic en el botón Reproducir entonces la duración funciona bien. Nunca funciona para canciones de la lista de reproducción.

Answer 1

Use loadedmetadata oyente de eventos para obtener la duración del audio tan pronto como se carguen los metadatos. Haga algo como el siguiente código:

var audio = new Audio(); 
audio.src = "mp3/song.mp3"; 
audio.addEventListener('loadedmetadata', function() { 
    console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds."); 
    audio.play(); 
});