Подтвердить что ты не робот

Продолжительность воспроизведения аудио файла HTML5 Показывает Нан

Я только начал изучать HTML5 и проходил через аудиоплеер HTML5 с помощью JQuery. Я закодировал игрока с плейлистом, все работает отлично, за исключением Duration, с помощью которого слайдер диапазона ввода не работает. Когда я отлаживался, я обнаружил, что моя продолжительность показывает мне 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, но по умолчанию я установил одну песню и сразу на загрузку страницы, когда я нажал кнопку Play, тогда продолжительность работы прекрасна. Он никогда не работает для плейлистов.

4b9b3361

Ответ 1

Используйте прослушиватель событий loadedmetadata​​i > , чтобы получить продолжительность звука, как только будут загружены метаданные. Сделайте что-то вроде следующего кода:

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