jPlayer/Audio 搜索非音频元素栏

Question

我有一个假的 jPlayer 音频，它的时间和进度条设置为真实播放器的时间和进度条，所以看起来它们是一样的。

这是源 jPlayer.js 文件中的代码：

updateFakePlayer: function(realjPlayer) {
   var self = this;
   var playlistjPlayer = $(realjPlayer.cssSelector.jPlayer).data().jPlayer;

   this.status.currentTime = playlistjPlayer.status.currentTime;
   this.status.currentPercentAbsolute = playlistjPlayer.status.currentPercentAbsolute;
   this.status.currentPercentRelative = playlistjPlayer.status.currentPercentRelative
   this.status.remaining = playlistjPlayer.status.remaining;
   this.status.readyState = playlistjPlayer.status.readyState;

   this._updateInterface();
},

我不想在假播放器中加载媒体，因为用户必须下载不必要的额外文件。

但是，因为我没有在假播放器中加载媒体，所以内置 html events 将不起作用，最重要的是搜索（用户点击搜索栏和音频跳转到那个位置）。那么我怎样才能模仿这个或创建我自己的呢？我想要它，以便如果用户对一个玩家执行操作，它会影响另一个玩家。当用户对真实播放器进行操作时，这非常有效，但显然不是对假播放器进行操作。 SoundCloud.com 我认为他们的球员也是这样做的。

编辑：http://jsfiddle.net/XLNCY/19674/

Answer 1

您可以获取当前鼠标位置，然后将其乘以轨道的整个持续时间，然后 divide 在父 div.

的宽度上

这是一个例子：

 // Get uer click event
  $(".jp-seek-bar").click(function(e) {

    // Get div offset position (top and left)
    var offset = $(this).offset();

    // Get the full width of the seek bar
    var totalWidth = $(this).outerWidth();

    // Get seek bar click position 
    var left = e.pageX - offset.left;

    // Get the track total duration
    var totalDuration = $("#jquery_jplayer_2").data("jPlayer").status.duration;

    // Get the current time position 
    var currentPosition = (left * totalDuration) / totalWidth;

    // Set the player to start for the new psotion
    $("#jquery_jplayer_2").jPlayer("play", currentPosition);
  });

jsFiddle： http://jsfiddle.net/XLNCY/19683/

jPlayer/Audio 搜索非音频元素栏

jPlayer/Audio Seek bar for non audio element

javascript

audio

jquery

jplayer