Search code examples
javascriptjplayer

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

jPlayer has a seekBar, with it's own built in functionality, however I want a seeker similar to the picture below. So you would hold down and drag the circle to seek through the song.

enter image description here

After researching it, it appears there is nothing built into jPlayer for that. If that is true, is there perhaps a way to set the current song progress dynamically? Then I can build my own seeker function and set the progress depending where the slider was released.

Solution

  • See http://jsfiddle.net/onigetoc/Ls8p90y9/4/

    This has a ball to seek with. Seems exactly what you want.

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

});