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

});