Search code examples
javascriptjqueryaudiojplayer

jPlayer/Audio Seek bar for non audio element

I have a fake jPlayer audio who's time and progress bar are set to that of the real player so that it looks like they are the same.

Here's that code in the source jPlayer.js file: 

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();
},

I don't want to load media in the fake player because the user has to download unnecessary extra files.

However, because I am not loading the media in the fake player then the built in html events will not work, most importantly the seeking (where the user clicks on the seek bar and the audio jumps to that position). So how can I emulate this or create my own? I am wanting it so that if the user does an action on one player, it affects the other one. This works great when the user acts on the real player, but obviously not on the fake one. SoundCloud.com does this with their players I think.

Edit: http://jsfiddle.net/XLNCY/19674/

Solution

  • You can get the current mouse position and then multiply it by the entire duration of the track then divide on the width of parent div.

    Here is an example:

     // 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/