Ho appena iniziato a imparare l'HTML5 e ho utilizzato il lettore audio HTML5 utilizzando JQuery. Ho codificato un giocatore con Playlist, tutto funziona bene tranne la Durata con l'aiuto del quale il mio slider del range di input non funziona. Quando ho eseguito il debug, ho scoperto che la mia durata mi mostra NAN. Sto impostando la durata dopo l'inizializzazione del brano.Durata lettore audio HTML5 Visualizzazione di Nan
Ecco il mio codice 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);
});
});
Quando clicco su playlist canzone, la durata è sempre NAN ma probabilmente ho impostato una canzone, e direttamente al caricamento della pagina quando ho cliccato il pulsante Play, quindi la durata funziona bene. Non funziona mai per i brani delle playlist.
Se si utilizza l'evento 'durationchang', la visualizzazione della durata viene aggiornata ogni volta che cambia. –
La risposta mi dà un buon suggerimento. – Calvin
Dove usi questo codice? – Jaromjj