I am trying to change the audio player on my website to show "time remaining" rather than "elapsed time". I have managed to make most of the changes I want with CSS or php changes but I am completely stuck with this one, or even know if it's possible.

The screenshot below shows the highlighted text when the player is started. For the actual player go to /
Can anyone point me in the right direction or suggest the fix?
Cheers.

Edit: With mozboz's help and a lot (and I mean a lot) of trial & error I have found a solution that will do. After failing with trying to add remainingDuration as a new variable, I ended up making the change below in the mp3-jplayer-2.7.js file with already existing variables. Changed line 403 from

jQuery(this.eID.indiM + j).empty().append('<span class="Smp3-tint tintmarg"></span> ' + this.Tformat(pt));

which shows current time, to

jQuery(this.eID.indiM + j).empty().append('<span class="Smp3-tint tintmarg"></span> ' + this.Tformat(pt) +'/' + this.Tformat(tt));

which shows current time/total time. I will carry playing with remainingTime. Also, I need to find a way of reducing the size on smaller screens.

Cheers.

I am trying to change the audio player on my website to show "time remaining" rather than "elapsed time". I have managed to make most of the changes I want with CSS or php changes but I am completely stuck with this one, or even know if it's possible.

The screenshot below shows the highlighted text when the player is started. For the actual player go to https://audioscapist/
Can anyone point me in the right direction or suggest the fix?
Cheers.

Edit: With mozboz's help and a lot (and I mean a lot) of trial & error I have found a solution that will do. After failing with trying to add remainingDuration as a new variable, I ended up making the change below in the mp3-jplayer-2.7.js file with already existing variables. Changed line 403 from

jQuery(this.eID.indiM + j).empty().append('<span class="Smp3-tint tintmarg"></span> ' + this.Tformat(pt));

which shows current time, to

jQuery(this.eID.indiM + j).empty().append('<span class="Smp3-tint tintmarg"></span> ' + this.Tformat(pt) +'/' + this.Tformat(tt));

which shows current time/total time. I will carry playing with remainingTime. Also, I need to find a way of reducing the size on smaller screens.

Cheers.

• plugins
• php
• css
• audio

1 Answer 1

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