Advertisement
Guest User

Add times to audio player in Hueman theme

a guest
Jun 1st, 2015
303
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 7.13 KB | None | 0 0
  1. <?php $meta = get_post_custom($post->ID); ?>
  2.  
  3. <?php if ( has_post_format( 'audio' ) ): // Audio ?>
  4.  
  5.     <?php $formats = array();
  6.         foreach ( explode('|','mp3|ogg') as $format ) {
  7.             if ( isset($meta['_audio_'.$format.'_url']) ) {
  8.                 $format = ($format=='ogg')?'oga':$format;
  9.                 // Change mp3 to m4a if necessary
  10.                 if ( $format == 'mp3' ) {
  11.                     if ( strstr($meta['_audio_mp3_url'][0],'.m4a') ) {
  12.                         $format = 'm4a';
  13.                     }
  14.                 }
  15.                 $formats[] = $format;
  16.             }
  17.         }
  18.     ?>
  19.  
  20.     <?php if ( !empty($formats) ): ?>
  21.     <script type="text/javascript">
  22.     jQuery(document).ready(function(){
  23.         if(jQuery().jPlayer) {
  24.             jQuery("#jquery-jplayer-<?php the_ID(); ?>").jPlayer({
  25.                 ready: function () {
  26.                     jQuery(this).jPlayer("setMedia", {
  27.                         <?php if(in_array('mp3',$formats)) { echo 'mp3: "'.$meta['_audio_mp3_url'][0].'",'."\n"; } ?>
  28.                         <?php if(in_array('m4a',$formats)) { echo 'm4a: "'.$meta['_audio_mp3_url'][0].'",'."\n"; } ?>
  29.                         <?php if(in_array('oga',$formats)) { echo 'oga: "'.$meta['_audio_ogg_url'][0].'",'."\n"; } ?>
  30.                     });
  31.                 },
  32.                 swfPath: "<?php echo get_template_directory_uri() ?>/js",
  33.                 cssSelectorAncestor: "#jp-interface-<?php the_ID(); ?>",
  34.                 supplied: "<?php echo implode(',',$formats); ?>"
  35.             });
  36.         }
  37.     });
  38.     </script>
  39.     <?php endif; ?>
  40.  
  41.     <div class="post-format">
  42.         <div class="image-container">
  43.             <?php if ( has_post_thumbnail() ) {
  44.                 the_post_thumbnail('thumb-large');
  45.                 $caption = get_post(get_post_thumbnail_id())->post_excerpt;
  46.                 if ( isset($caption) && $caption ) echo '<div class="image-caption">'.$caption.'</div>';
  47.             } ?>
  48.         </div>
  49.  
  50.         <div id="jquery-jplayer-<?php the_ID(); ?>" class="jp-jplayer"></div>
  51.  
  52. <?php if (wp_is_mobile()) { ?>
  53.         <div class="jp-audio">
  54.             <div id="jp-interface-<?php the_ID(); ?>" class="jp-interface">
  55.                 <ul class="jp-controls">
  56.                     <li><a href="#" class="jp-play" tabindex="1"><i class="fa fa-play"></i></a></li>
  57.                     <li><a href="#" class="jp-pause" tabindex="1"><i class="fa fa-pause"></i></a></li>
  58.                     <li><a href="#" class="jp-mute" tabindex="1"><i class="fa fa-volume-up"></i></a></li>
  59.                     <li><a href="#" class="jp-unmute" tabindex="1"><i class="fa fa-volume-down"></i></a></li>
  60.                 </ul>
  61.                 <div class="jp-progress-container" style="margin-right: 55px">
  62.                     <div class="jp-progress">
  63.                         <div class="jp-seek-bar">
  64.                             <div class="jp-play-bar"></div>
  65.                         </div>
  66.                     </div>
  67.                     <div class="jp-current-time"></div>
  68.                 </div>
  69.                 <div class="jp-volume-bar-container">
  70.                     <div class="jp-duration" style="margin-left: 0; margin-top: -8px"></div>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.  
  75. <?php } else { ?>
  76.  
  77.         <div class="jp-audio">
  78.             <div id="jp-interface-<?php the_ID(); ?>" class="jp-interface">
  79.                 <ul class="jp-controls">
  80.                     <li><a href="#" class="jp-play" tabindex="1"><i class="fa fa-play"></i></a></li>
  81.                     <li><a href="#" class="jp-pause" tabindex="1"><i class="fa fa-pause"></i></a></li>
  82.                     <li><a href="#" class="jp-mute" tabindex="1"><i class="fa fa-volume-up"></i></a></li>
  83.                     <li><a href="#" class="jp-unmute" tabindex="1"><i class="fa fa-volume-down"></i></a></li>
  84.                 </ul>
  85.                 <div class="jp-progress-container">
  86.                     <div class="jp-progress">
  87.                         <div class="jp-seek-bar">
  88.                             <div class="jp-play-bar"></div>
  89.                         </div>
  90.                     </div>
  91.                     <div class="jp-current-time"></div>
  92.                 </div>
  93.                 <div class="jp-volume-bar-container">
  94.                     <div class="jp-volume-bar">
  95.                         <div class="jp-volume-bar-value"></div>
  96.                     </div>
  97.                     <div class="jp-duration"></div>
  98.                 </div>
  99.             </div>
  100.         </div>
  101.  
  102. <?php } ?>
  103.  
  104.     </div>
  105.  
  106. <?php endif; ?>
  107.  
  108. <?php if ( has_post_format( 'gallery' ) ): // Gallery ?>
  109.  
  110.     <div class="post-format">
  111.         <?php $images = alx_post_images(); if ( !empty($images) ): ?>
  112.         <script type="text/javascript">
  113.             // Check if first slider image is loaded, and load flexslider on document ready
  114.             jQuery(document).ready(function(){
  115.              var firstImage = jQuery('#flexslider-<?php echo the_ID(); ?>').find('img').filter(':first'),
  116.                 checkforloaded = setInterval(function() {
  117.                     var image = firstImage.get(0);
  118.                     if (image.complete || image.readyState == 'complete' || image.readyState == 4) {
  119.                         clearInterval(checkforloaded);
  120.                         jQuery('#flexslider-<?php echo the_ID(); ?>').flexslider({
  121.                             animation: "fade",
  122.                             slideshow: true,
  123.                             directionNav: true,
  124.                             controlNav: true,
  125.                             pauseOnHover: true,
  126.                             slideshowSpeed: 7000,
  127.                             animationSpeed: 600,
  128.                             smoothHeight: true,
  129.                             touch: false
  130.                         });
  131.                     }
  132.                 }, 20);
  133.             });
  134.         </script>
  135.         <div class="flex-container">
  136.             <div class="flexslider" id="flexslider-<?php the_ID(); ?>">
  137.                 <ul class="slides">
  138.                     <?php foreach ( $images as $image ): ?>
  139.                         <li>
  140.                             <?php $imageid = wp_get_attachment_image_src($image->ID,'large'); ?>
  141.                             <img src="<?php echo $imageid[0]; ?>" alt="<?php echo $image->post_title; ?>">
  142.  
  143.                             <?php if ( $image->post_excerpt ): ?>
  144.                                 <div class="image-caption"><?php echo $image->post_excerpt; ?></div>
  145.                             <?php endif; ?>
  146.                         </li>
  147.                     <?php endforeach; ?>
  148.                 </ul>
  149.             </div>
  150.         </div>
  151.         <?php endif; ?>
  152.     </div>
  153.  
  154. <?php endif; ?>
  155.  
  156. <?php if ( has_post_format( 'image' ) ): // Image ?>
  157.  
  158.     <div class="post-format">
  159.         <div class="image-container">
  160.             <?php if ( has_post_thumbnail() ) {
  161.                 the_post_thumbnail('thumb-large');
  162.                 $caption = get_post(get_post_thumbnail_id())->post_excerpt;
  163.                 if ( isset($caption) && $caption ) echo '<div class="image-caption">'.$caption.'</div>';
  164.             } ?>
  165.         </div>
  166.     </div>
  167.  
  168. <?php endif; ?>
  169.  
  170. <?php if ( has_post_format( 'video' ) ): // Video ?>
  171.  
  172.     <div class="post-format">
  173.         <?php
  174.             if ( isset($meta['_video_url'][0]) && !empty($meta['_video_url'][0]) ) {
  175.                 global $wp_embed;
  176.                 $video = $wp_embed->run_shortcode('[embed]'.$meta['_video_url'][0].'[/embed]');
  177.                 echo $video;
  178.             } elseif ( isset($meta['_video_embed_code'][0]) && !empty($meta['_video_embed_code'][0]) ) {
  179.                 echo '<div class="video-container">';
  180.                 echo $meta['_video_embed_code'][0];
  181.                 echo '</div>';
  182.             }
  183.         ?>
  184.     </div>
  185.  
  186. <?php endif; ?>
  187.  
  188. <?php if ( has_post_format( 'quote' ) ): // Quote ?>
  189.  
  190.     <div class="post-format">
  191.         <div class="format-container pad">
  192.             <i class="fa fa-quote-right"></i>
  193.             <blockquote><?php echo isset($meta['_quote'][0])?wpautop($meta['_quote'][0]):''; ?></blockquote>
  194.             <p class="quote-author"><?php echo (isset($meta['_quote_author'][0])?'&mdash; '.$meta['_quote_author'][0]:''); ?></p>
  195.         </div>
  196.     </div>
  197.  
  198. <?php endif; ?>
  199.  
  200. <?php if ( has_post_format( 'chat' ) ): // Chat ?>
  201.  
  202.     <div class="post-format">
  203.         <div class="format-container pad">
  204.             <i class="fa fa-comments-o"></i>
  205.             <blockquote>
  206.                 <?php echo (isset($meta['_chat'][0])?wpautop($meta['_chat'][0]):''); ?>
  207.             </blockquote>
  208.         </div>
  209.     </div>
  210.  
  211. <?php endif; ?>
  212.  
  213. <?php if ( has_post_format( 'link' ) ): // Link ?>
  214.  
  215.     <div class="post-format">
  216.         <div class="format-container pad">
  217.             <p><a href="<?php echo (isset($meta['_link_url'][0])?$meta['_link_url'][0]:'#'); ?>">
  218.                 <i class="fa fa-link"></i>
  219.                 <?php echo (isset($meta['_link_title'][0])?$meta['_link_title'][0]:get_the_title()); ?> &rarr;
  220.             </a></p>
  221.         </div>
  222.     </div>
  223.  
  224. <?php endif; ?>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement