jPlayer/Audio 非音频元素的搜索栏

Posted 2023-02-25

【中文标题】jPlayer/Audio 非音频元素的搜索栏

【英文标题】：jPlayer/Audio Seek bar for non audio element

【发布时间】：2016-02-14 14:53:37

【问题描述】：

我有一个假的 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/

【问题讨论】：

更新帖子以包含 JSFiddle。

【参考方案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/

【讨论】：

你太棒了。谢谢。