jPlayer - Comment faire un bouton pour faire glisser et chercher la progression

Question

jPlayer a un seekBar, avec sa propre fonctionnalité intégrée, mais je veux un chercheur similaire à l'image ci-dessous. Donc, vous maintenez et faites glisser le cercle pour chercher à travers la chanson.

Après des recherches, il semble qu'il n'y a rien construit dans jPlayer pour cela. Si c'est vrai, est-ce qu'il y a peut-être un moyen de régler la progression de la chanson en cours de façon dynamique? Ensuite, je peux créer ma propre fonction de recherche et définir la progression en fonction de l'endroit où le curseur a été libéré.

Answer 1

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

Cela a une boule de chercher avec. Semble exactement ce que vous voulez.

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

});