HTML5 Audio Player Duration Showing Nan

duration, html5-audio, nan

Solution

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

Problem

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.

Original source