Changing “elapsed time” to “time remaining” on MP3-jPlayer audio player with CSS or PHP changes

So the mediaplayer being used here is MediaElement.js. You can read their docs there.

The media player has an event which fires to update the time and this happens in javascript. You need to change the javascript or the way it works, I don’t think this is something you can do with just CSS.

There are two important bits of code that you need to figure out how to override, first, here is the code where the mediaplayer connects up the event that updates the time display. This is in mp3-player-2.7.js line 202:

jQuery(this.jpID).bind(jQuery.jPlayer.event.timeupdate, function(event) {
        var lp = that.get_loaded(event);
        var ppA = event.jPlayer.status.currentPercentAbsolute;
        var pt = event.jPlayer.status.currentTime;
        var tt = event.jPlayer.status.duration;
        that.E_update(that.tID, lp, ppA, pt, tt);
    });

You can lookup the E_update function as it does a lot of stuff to figure out what’s going on and update the display. You’ll note that there’s a line here that sets ‘tt’ with the duration. If I were you I would edit the mp3 player js file in order to experiment with changing the above code, or the E_update function in order to make the change you want.

Reply here if you try this and get stuck or need more help