Durée du lecteur audio HTML5 montrant Nan

J'ai juste commencé à apprendre le HTML5 et le passait par HTML5 Audio player à l'aide de JQuery. J'ai codé un joueur avec une liste de lecture, tout fonctionne bien sauf la Durée avec l'aide de qui ma de la gamme d'entrée curseur ne fonctionne pas. Quand j'ai débogué j'ai trouvé que ma durée est en me montrant NAN. Je suis de définir la durée après la chanson est initialisé.

Voici mon code 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);
    });

});

Quand je clique sur la liste de lecture de la chanson, la durée est toujours NAN mais par défaut j'ai mis une chanson, et directement au chargement de la page quand j'ai cliqué sur Play, puis sur le bouton durée fonctionne très bien. Il ne fonctionne jamais pour la playlist de chansons.

source d'informationauteur Nick

  1. 28

    Utiliser le loadedmetadata écouteur d'événement pour obtenir la durée de l'audio dès que les métadonnées est chargé. Faire quelque chose comme le code suivant:

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