Support » Theme: Hueman » Adding Elapsed Time to jPlayer in Audio Post Format

  • Resolved Douglas Bell

    (@webmacster87)


    Love this theme, it’s offered a great base framework that I’ve customized a bit for the podcast/blog website that I maintain.

    I really like the way that jPlayer has been tightly integrated into the theme (along with a featured image spot) in the Audio post format, which we use frequently.

    However, our podcast producer recently asked me if it’s possible to get the audio player to display the Elapsed Time within the audio player while the audio is being played back.

    I did a little fiddling around within <b>inc/post-formats.php</b> and figured out that I could add <div class="jp-current-time"></div> to make the elapsed time display within the <div id="jp-interface-<?php the_ID(); ?>" class="jp-interface"> div (lines 53-59)… but the problem is that it’s not simply that easy to squeeze it in between the play/pause button and the play/seek bar without borking up the layout.

    Looking at the CSS for the jPlayer elements in style.css, I’m having a difficult time figuring out the most effective way to edit the parameters to make it possible for me to squeeze in the jp-current-time div.

    Any advice would be greatly appreciated. Thank you!

Viewing 10 replies - 1 through 10 (of 10 total)
  • bdbrown

    (@bdbrown)

    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.

    Thread Starter Douglas Bell

    (@webmacster87)

    Hi bdbrown,

    The site is http://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: http://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: http://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!

    bdbrown

    (@bdbrown)

    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.

    Thread Starter Douglas Bell

    (@webmacster87)

    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.

    http://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.

    bdbrown

    (@bdbrown)

    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.

    bdbrown

    (@bdbrown)

    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.

    bdbrown

    (@bdbrown)

    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;
    }
    Thread Starter Douglas Bell

    (@webmacster87)

    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

    Thread Starter Douglas Bell

    (@webmacster87)

    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.

    http://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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Adding Elapsed Time to jPlayer in Audio Post Format’ is closed to new replies.