Question

我正在尝试在播放列表中获取每首歌曲的持续时间。它给了我NaN。我读到如果浏览器没有足够的时间来读取音频数据，那么它返回NaN。所以我使用了song.onloadedmetadata = duration = song.duration. // song is audio object. 它也给了NaN。

如果我在alert("hello");之前写song.onloadmetadata = duration = song.duration，那么它会显示歌曲的持续时间。这意味着时间浏览器有足够的时间来计算持续时间。但我不希望每次加载页面时都会显示警报。

实际上我正在为每个循环加载所有来自XML的歌曲。我正在尝试获得每首歌的持续时间。这样我就可以在HTML页面上打印歌曲名称及其持续时间。这是我的代码，请告诉我该怎么做。

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

                    });                 



                });
            }

请告诉我我错在哪里并提供代码，以便我可以在该循环中获取持续时间并将其打印在我的页面上。

Answer 1

我认为您可以设置回调到song.onloadedmetadata，然后在此回调函数中获取持续时间。

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

Answer 2

这是一个简单的解决方法：

用户滚动时加载歌曲持续时间：

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

然后使用

设置页面自动滚动加载

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

如何在HTML5音频播放器中获取播放列表中每首歌曲的持续时间？

2 个答案: