HTML5音频播放器持续时间显示Nan [英] HTML5 Audio Player Duration Showing Nan

问题描述

我刚刚开始学习HTML5，并且正在使用JQuery来学习HTML5音频播放器.我用播放列表"编码了一个播放器，除持续时间"以外，其他所有功能都正常运行，而输入范围"滑块不起作用.当我调试时，我发现我的持续时间正在向我显示NAN.我正在设置歌曲初始化后的持续时间.

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.

这是我的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，但是默认情况下，我已设置了一首歌曲，并且当我单击播放"按钮时直接在页面加载时，持续时间效果很好.它永远不适用于播放列表中的歌曲.

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.

推荐答案

使用元数据加载后，使用 loadedmetadata 事件侦听器获取音频的持续时间.做类似下面的代码:

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

这篇关于HTML5音频播放器持续时间显示Nan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！