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

【问题标题】：How to get Duration of each song in playlist in HTML5 Audio Player?如何在 HTML5 音频播放器的播放列表中获取每首歌曲的持续时间？
【发布时间】：2014-04-04 03:19:45
【问题描述】：

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

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

实际上，我正在为每个循环从 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> ');

                    });                 



                });
            }

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

【问题讨论】：

您控制音频文件，还是来自其他站点？如果您控制文件，那么预处理将是有序的。文件是什么格式的？ .mp3？ .m4a？ .ogg？混合？
@MultimediaMike 我正在制作音频播放器演示，是的，我正在控制声音，它是 MP3 格式的。我不了解预处理顺序。请解释

标签： jquery html audio duration

【解决方案1】：

我觉得你可以给 song.onloadedmetadata 设置一个回调，然后在这个回调函数中获取时长。

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

【讨论】：

【解决方案2】：

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

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

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

然后将页面设置为自动滚动加载使用

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

【讨论】：