HTML5 Audio Player Duration Showing Nan

Question

I just started to learn HTML5 and was going through HTML5 Audio player using JQuery. I coded a player with Playlist, everything works fine except the Duration with help of which my input range slider doesn't works. When I debugged I found that my duration is showing me NAN. I am setting the duration after the song is initialized.

Here is my 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);
    });

});

When I click on playlist song, the duration is always NAN but by default I have set one song, and directly on page load when I clicked Play button then the duration works fine. It never works for playlist songs.

Answer 1

Use the loadedmetadata event listener to get the duration for the audio as soon as the metadata is loaded. Do something like the following code:

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