jPlayer - Как сделать кнопку, чтобы скользить и добиваться прогресса

Question

jPlayer - Как сделать кнопку, чтобы скользить и добиваться прогресса

1

jPlayer имеет seekBar, с его собственной встроенной функциональностью, однако я хочу, чтобы искатель был похож на рисунок ниже. Таким образом, вы будете удерживать и тянуть круг, чтобы искать песню.

Изучив его, кажется, что в jPlayer нет ничего встроенного для этого. Если это так, возможно ли, возможно, динамический динамический ход текущей песни? Затем я могу создать свою собственную функцию поиска и установить прогресс в зависимости от того, где был выпущен слайдер.

Samir 30 июнь 2017, в 12:46

Источник

Теги:

javascript

jplayer

1 ответ

Ещё вопросы

Martin Dawson · Accepted Answer · 2017-07-02T06-40-00.000Z

См. Http://jsfiddle.net/onigetoc/Ls8p90y9/4/

У этого есть мяч, чтобы искать. Кажется, именно то, что вы хотите.

$(document).ready(function () {

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Bubble",
                mp3: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
            });
        },
        timeupdate: function(event) {
            $("#jp_container_1 .jp-ball").css("left",event.jPlayer.status.currentPercentAbsolute + "%");
        },
        swfPath: "https://rawgit.com/happyworm/jPlayer/tree/master/dist/jplayer",
        supplied: "mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    });


    /* Modern Seeking */

    var timeDrag = false; /* Drag status */
    $('.jp-play-bar').mousedown(function (e) {
        timeDrag = true;
        updatebar(e.pageX);
    });
    $(document).mouseup(function (e) {
        if (timeDrag) {
            timeDrag = false;
            updatebar(e.pageX);
        }
    });
    $(document).mousemove(function (e) {
        if (timeDrag) {
            updatebar(e.pageX);
        }
    });

    //update Progress Bar control
    var updatebar = function (x) {

        var progress = $('.jp-progress');
        var maxduration = $("#jquery_jplayer_1").jPlayer.duration; //audio duration
        console.log(maxduration);
        var position = x - progress.offset().left; //Click pos
        var percentage = 100 * position / progress.width();

        //Check within range
        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }

        $("#jquery_jplayer_1").jPlayer("playHead", percentage);

        //Update progress bar and video currenttime
        $('.jp-ball').css('left', percentage+'%');
        $('.jp-play-bar').css('width', percentage + '%');
        $("#jquery_jplayer_1").jPlayer.currentTime = maxduration * percentage / 100;
    };

});