Вопрос по – Продолжительность аудиоплеера HTML5, показывающая Nan

14

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

Ваш Ответ

1   ответ
31

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(); 
});
Ответ дает мне хороший намек.
Я только что реализовал код в своем приложении и определенно избавился от проблемы NaN. Единственная проблема в том, что музыка сразу начинает играть, когда я попадаю на страницу. Есть ли способ заставить эту работу И возможность контролировать, когда музыка должна играть через кнопку воспроизведения / паузы? Заранее спасибо!
Когда вы создаете экземпляр своего аудиообъекта, вы добавляете прослушиватель событий, а затем, когда метаданные загружаются, запускается функция обратного вызова.
Если вы используетеdurationchang Вместо этого отображение продолжительности обновляется каждый раз, когда оно изменяется.
Где вы используете этот код?

Похожие вопросы