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

您可以获取当前鼠标位置，然后将其乘以轨道的整个持续时间，然后除以父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 Seek条

1 个答案: