jPlayer

Question

jPlayer 有一个 seekBar，它有自己的内置功能，但是我想要一个类似于下图的搜索器。所以你会按住并拖动圆圈来搜索歌曲。

经过研究，jPlayer 似乎没有内置任何东西。如果是这样，是否有办法动态设置当前歌曲的进度？然后我可以构建自己的搜寻器功能并根据释放滑块的位置设置进度。

Answer 1

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

});

jPlayer - 如何制作一个按钮来滑动和寻找进度

jPlayer - How to make a button to slide and seek progress

javascript