Czas trwania odtwarzacza audio HTML5 Pokazywanie Nan

Question

Właśnie zacząłem uczyć się HTML5 i przeglądałem odtwarzacz HTML5 Audio za pomocą JQuery. Zakodowałem odtwarzacz z listą odtwarzania, wszystko działa dobrze, oprócz czasu trwania, dzięki czemu mój suwak zakresu wejściowego nie działa. Kiedy debugowałem stwierdziłem, że mój czas trwania pokazuje mi NAN. Ustawiam czas trwania po zainicjowaniu utworu.

Oto mój kod 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); 
    }); 

}); 

Kiedy klikam piosenkę listy odtwarzania, czas jest zawsze NAN ale domyślnie mam ustawić jedną piosenkę, a bezpośrednio na stronie obciążenia po kliknięciu przycisku Play wtedy czas działa w porządku. To nigdy nie działa dla utworów na liście odtwarzania.

Answer 1

Użyj odbiornika zdarzeń loadedmetadata, aby uzyskać czas trwania audio, gdy tylko załadują się metadane. Zrób coś takiego następującego kodu:

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