2012-06-03 11 views
13

Ich begann gerade HTML5 zu lernen und ging durch HTML5 Audio-Player mit JQuery. Ich habe einen Player mit Playlist programmiert, alles funktioniert gut außer der Duration, mit der mein Input Range Slider nicht funktioniert. Als ich debuggte, stellte ich fest, dass meine Dauer mir NAN zeigte. Ich stelle die Dauer nach der Initialisierung des Songs ein.HTML5 Audio Player Dauer zeigt Nan

Hier mein JS-Code

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); 
    }); 

}); 

ist, wenn ich auf Playlist Song klicken, ist die Dauer immer NAN aber standardmäßig Ich habe einen Song gesetzt und direkt beim Laden der Seite, wenn ich Play-Taste angeklickt dann auf der Dauer funktioniert gut. Es funktioniert nie für Wiedergabelisten.

Antwort

27

Verwenden Sie den loadedmetadata Event Listener, um die Dauer für das Audio zu erhalten, sobald die Metadaten geladen sind. Beispiel:

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

Wenn Sie stattdessen das Ereignis 'durationchang' verwenden, wird die Anzeige der Dauer bei jeder Änderung aktualisiert. –

+0

Die Antwort gibt mir einen guten Hinweis. – Calvin

+0

Wo verwenden Sie diesen Code? – Jaromjj