HTML5音频播放器的时长显示为Nan

Question

HTML5音频播放器的时长显示为Nan

15

我刚开始学习HTML5，正在通过JQuery学习HTML5音频播放器。我编写了一个带有播放列表的播放器，一切都很正常，除了持续时间，导致我的输入范围滑块不起作用。当我进行调试时，我发现我的持续时间显示为NAN。我是在歌曲初始化后设置持续时间的。

这是我的JS代码：

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

});

每当我点击播放列表中的歌曲时，持续时间总是为NAN（非数字），但默认情况下我设置了一首歌曲，并且在页面加载时直接点击播放按钮时，持续时间就可以正常工作。这对于播放列表中的歌曲从来没有起作用。

- Nick

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fsschmitt · Accepted Answer

使用loadedmetadata事件监听器，在元数据加载完成后立即获取音频的持续时间。可以使用以下代码：

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