Thời lượng trình phát âm thanh HTML5 Hiển thị Nan

Question

Tôi vừa mới bắt đầu tìm hiểu HTML5 và đã trải qua trình phát âm thanh HTML5 bằng cách sử dụng JQuery. Tôi mã hóa một người chơi với Playlist, mọi thứ hoạt động tốt ngoại trừ Thời lượng với trợ giúp mà thanh trượt phạm vi nhập của tôi không hoạt động. Khi tôi gỡ rối tôi thấy rằng thời gian của tôi đang cho tôi thấy NAN. Tôi đang thiết lập thời lượng sau khi bài hát được khởi tạo.

Đây là mã JS của tôi

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

}); 

Khi tôi bấm vào bài hát playlist, thời gian luôn là NAN nhưng theo mặc định tôi đã đặt một bài hát, và trực tiếp trên tải trang khi tôi nhấp vào nút Play thì thời gian hoạt động tốt. Nó không bao giờ hoạt động cho các bài hát playlist.

Answer 1

Sử dụng nạpmetadata trình xử lý sự kiện để nhận thời lượng cho âm thanh ngay khi siêu dữ liệu được tải. Làm điều gì đó giống như mã sau:

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