Using repeater fields with MP3 and Audio players

• henrycullen

• July 28, 2015 at 3:45 am

Hello everyone
I hope I’m posting this in the right place.
I’m developing a site where people add music tracks to a custom post type to display data and add the file URL to the native WP audio shortcode so the file can be played.

It uses a repeater field “tracks” for the addition of the tracks & their data. We have 4 sub fields, title, artist, and mix type, these are all basic text fields. Then we have the upload field for uploading and inserting the audio track itself.

in my post template I’m using this code:

		<div class="large-12 medium-12 columns entry-content">
			<h4>Track Info:</h4>

	<?php // Check if the repeater field has rows of data
	   
		if( have_rows('tracks') ):?>
       
			<ul class="tracks">

				 <?php // loop through the rows of data & set variable for Track URL
				    while ( have_rows('tracks') ) : the_row();
				    $track = get_sub_field('track_url') ; ?>
				     
		                     <li>
						          <?php the_sub_field('track_title');?> | <?php the_sub_field('artist_name');?> | <?php the_sub_field('remixer');?> | <a href='<?php echo $track;?>' class="download-link" >Download MP3</a> 
						     </li> 

                             <li> 
                               <div>                              
		                             <?php 
                                    
                                    echo wp_audio_shortcode( $track );    

		                             ?>
                               </div>
                            </li>                       
                        <?php endwhile;?>                
                      </ul>
        <?php else :?>

	    <?php endif;?>
		    
		</div>

As you can see this should (onad does) display a list of tracks with their data and a player with the Audio URL as the playable file….but

In my test post I have created 2 repeater rows comprising of 2 different audio tracks with data for each, I’m getting it all displaying out the front in a list no problem, ACF is set to display the audio track as file URL not an array.

My download link is displaying the correct track name and URL for each one. But the audio player only wants to insert the first track in each player.

Documentation how to use the audio shortcode in single post templates is very limited, and don’t see anything about including the native WP HTML5 audio player in a loop of some kind, so this is my attempt at it.

I want to keep 3rd party plug ins to a minimum for obvious reasons, and I rather like the WP native player.

Anyone out there got a helping hand? Why does the audio player only take the first track, when the download links for each track in other areas of my code are correct?

Is it something to do with me using the function to invoke the WP player incorrectly? Should I be displaying the Audio File as an array and using [“url”] to grab just the URL ( I have tried this to no avail )

Forgive the messy code I’ve been round and round a bit and will tidy up once I have something that works.

Many Thanks for any help

• Jonathan

• July 28, 2015 at 6:57 am

Hi @henrycullen

Seems strange to me.. so if you echo $track within the loop you’ll get each different audio files URL as expected?

• henrycullen

• July 30, 2015 at 8:14 am

yes I do, but not when it is being echoed as part of the WP Audio PLayer.

at the moment I have it working perfect like this

        <li> 
                               <div> 
		                             <audio controls class="audio-player">
                                          <source src="<?php echo $track; ?>" type="audio/mpeg">
										Your browser does not support the audio element.
									 </audio> 
                               </div>
                            </li>  

using the HTML5 player

• Jonathan

• July 30, 2015 at 5:11 pm

Okay, to me this seems like you’re experienced some bug in the wp audio player.. Perhaps consider adding a ticket to wp core if you can’t find any 🙂

Yes that will work but you won’t get any good fallback for older browsers. You can find a good curated list of fallback options here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#audio

If older browsers are of any concern to you, you basically have to add a fallback 🙂

• mediawerk

• July 30, 2015 at 6:04 pm

would it make a difference if you use this array instead of the track_url direct?

$track = get_sub_field('track_url'); 
//if you use data-array instead of data-url at file return
//$track_url = get_sub_field('track_url') ;
//$track = $track_url['url'];

    $attr = array(
        'src'      => $track ,
        'loop'     => '',
        'autoplay' => '',
        'preload' => 'none'
        );
   echo wp_audio_shortcode( $attr );

• henrycullen

• August 4, 2015 at 8:56 am

Thank you Mediawerk.
Yes that worked perfectly.
Onwards!

• Jonathan

• August 9, 2015 at 3:19 am

That’s really interesting as to why it works.. from what I understand in your explanation of your setup it’s no difference at all regarding outcome.