Adding Elapsed Time to jPlayer in Audio Post Format

Hi Douglas. If you can post a link to your site that shows the player with the time div applied I can take a look at it tomorrow. Thanks.

Hi bdbrown,

The site is https://krpoliticaljunkie.com

Because it’s a live site, I can’t keep the elapsed time visible for you to see directly… I’m only able to tinker with this while I have the site in maintenance mode. However I’ve taken some screenshots of what it looks like.

In <b>inc/post-formats.php</b> if I add <div class="jp-current-time"></div> AFTER the </ul> on line 59 but BEFORE the <div class="jp-progress-container"> on line 60, I get this: https://krpoliticaljunkie.com/temp/jplayer-elapsed-1.jpg

But if I add the jp-current-time div AFTER <div class="jp-progress-container"> on line 60 but BEFORE <div class="jp-progress"> on line 61, I get this: https://krpoliticaljunkie.com/temp/jplayer-elapsed-2.jpg

And if I add the jp-current-time div anywhere within the “jp-progress” div (after line 61), then the player layout looks normal (with the elapsed time not visible), but the seek bar doesn’t show any change nor does it respond to mouse clicks during playback.

(And of course, I’m using a child theme, so once I can figure out how to make this work I will make sure to roll back any direct code changes in inc/post-formats.php and do them through the child theme.)

Thanks for your assistance!

Understood. I’ve done very little with the audio format so don’t know that I’ll be able to help with a solution, but I’ll be glad to take a look at it. Since I can’t view it online I’d like to see the code you’re using. Perhaps you could copy out the audio section of post-formats.php that shows what you’re trying to change, and post it on Pastebin, then post a link back here. Thanks.

Here’s a full paste of inc/post-formats.php from the Hueman theme… I’m trying to add that jp-current-time div somewhere around lines 59/60/61.

https://pastebin.com/3AzPDrHa

Most likely what needs to happen is that I need to add in the jp-current-time div there and then make edits to the jPlayer classes defined in style.css (lines 1027-1072) in order to resize the other elements to make room for the elapsed time counter.

I just loaded up a fresh copy of v2.2.2 of the theme, created a new Standard format post, got the url from an mp3 in the Media Library, copied the url into the post content, and it shows the timer by default. Also tried it on v1.5.4 by using the Add Media button to insert the mp3 into the post content; same results. Screenshot here. But I see that you’re using the Audio post format so will have to dig into that a bit.

Made of bit of progress. Set up an Audio post with the same mp3. Added “jp-current-time” and “jp-duration” in post-formats.php, then added a bit of css, and posted the code on Pasetbin. Here’s a screenshot of the results. Not perfect but I think a step in the right direction. I don’t know if there is any way to shorten the length of the progress bar and then move the times up inline. I’ll do a bit more testing and see if I can come up with something.

OK. Updated css; this should be pretty close:

/* compress progressbar to make room for timers */
.jp-progress-container {
  margin-left: 65px;
  margin-right: 120px;
}
/* move timers up and left */
.jp-duration {
  margin-top: -15px;
  margin-left: -65px;
}
.jp-current-time {
  margin-top: -15px;
  margin-left: -45px;
}
/* fonts for timers */
.jp-current-time, .jp-duration {
  color: #fff;
  font-size: 14px;
}

Sorry for the late response (I got a bit busy with other projects over the past month or two). I just set up this code and it looks perfect… thank you very much for the help.

I made a few additional tweaks on the backend for layout (like removing the left-borders from .jp-progress-container and .jp-volume-bar-container since they were clashing with the counter text), and also made some adjustments for display on mobile devices.

I really appreciate you taking the time to help me out with some code… thanks again!

Douglas it would be possible to share your code?? hehe

Here is modified CSS (mostly the same as bdbrown’s with a few tweaks:

/* compress progressbar to make room for timers */
.jp-progress-container {
  margin-left: 65px;
  margin-right: 120px;
}
.jp-progress-container,
.jp-volume-bar-container {
	border-left: 0;
}
/* move timers up and left */
.jp-duration {
  margin-top: -15px;
  margin-left: -65px;
}
.jp-current-time {
  margin-top: -15px;
  margin-left: -42px;
  width: 44px;
}
/* fonts for timers */
.jp-current-time, .jp-duration {
  color: #fff;
  font-size: 12px;
}

And of course since I’m using a child theme, here is the entirety of inc/post-formats.php that I put in my child theme. The only section that I’ve modified is the audio post format, since that’s the only one I use on my site regularly.

https://pastebin.com/kz0tQdtw

One modification that I made from bdbrown’s code was a slightly different view for mobile browsers. In my testing, mobile web browsers were rendering the player differently, in that they were not displaying the volume slider (which, admittedly, is a bit too small for a touch interface anyway), so as a quick hack, I use wp_is_mobile() to remove the volume slider and alter the layout of the remaining elements.