jPlayer - Wie man eine Taste zum Schieben und Suchen Fortschritt

Question

jPlayer hat eine seekBar, mit seiner eigenen eingebauten Funktionalität, aber ich möchte einen Sucher ähnlich dem Bild unten. Du würdest also den Kreis halten und ziehen, um das Lied zu durchsuchen.

Nachdem die Erforschung, wie es scheint nichts in JPlayer dafür gebaut ist. Wenn das stimmt, gibt es vielleicht eine Möglichkeit, den aktuellen Song-Fortschritt dynamisch einzustellen? Dann kann ich meine eigene Suchfunktion erstellen und den Fortschritt abhängig davon festlegen, wo der Slider veröffentlicht wurde.

Answer 1

Siehe http://jsfiddle.net/onigetoc/Ls8p90y9/4/

Dieses eine Kugel mit zu suchen hat. Scheint genau das, was du willst.

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

});