How to get Duration of each song in playlist in HTML5 Audio Player?

Question

I'm trying to get duration of each song in playlist. Its giving me NaN. I read that if browser doesn't get enough time to read the audio data then it returns NaN. So i used song.onloadedmetadata = duration = song.duration. // song is audio object. Its also giving NaN.

If i write alert("hello"); before song.onloadmetadata = duration = song.duration then it display duration of song. It means that time browser get enough time to calculate the duration. But i don't want that alert shows on every time i load the page.

Actually I'm loading all songs from XML through for each loop. I'm trying to get duration of each song there. So that i can print song name and its duration on HTML page. Here is my code please suggest me what should i do.

function xmlParser(xml) 
            {
            //alert("Inside XML block");
                $(xml).find("songs").each(function () 
                {
                    $(xml).find("song").each(function(i) 
                    {
                        songurl = $(this).find("music").text();
                        id = $(this).find("music").attr("id");
                        image = $(this).find("image").text();
                        sname = $(this).find("name").text(); 

                        song_name.push(sname);
                        album_image.push(image);                        
                        playlist.push(songurl);


                     //Code to get Each Song Duration in Playlist           

                        song.src = songurl; 


                        song.onloadedmetadata = duration = song.duration;
                            //duration=song.duration;                           

                            var sec= new Number();
                            var min= new Number();
                            sec = Math.floor( duration );    
                            min = Math.floor( sec / 60 );
                            min = min >= 10 ? min : '0' + min;    
                            sec = Math.floor( sec % 60 );
                            sec = sec >= 10 ? sec : '0' + sec;

                        //code For Each song duration Ends Here

                        $("#SongsList" ).append('<li id="'+id+'"> <a href="#" id="'+id+'">' +sname+  ' </a> <h6 style="color:#74dad5; font-family:verdana; padding-left:279px;">'+min+' : '+sec+' </h6></li> ');

                    });                 



                });
            }

Please tell me where i'm wrong and provide me code so that i can get the duration inside that loop and print it on my page.

Answer 1

I think you can set a callback to song.onloadedmetadata, and then get duration in this callback function.

song.onloadedmetadata = function() {
  dump('duration onloadeddata = ' + song.duration);
}

Answer 2

Here's a simple workaround:

load the song durations once the user scrolls using:

$(document).scroll(function() { //load song durations}

Then set the page to automatically scroll onload using

$(window).load(function() { document.getElementById( 'any_id' ).scrollIntoView() })