Home › Forums › General Issues › Using repeater fields with MP3 and Audio players
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
Seems strange to me.. so if you echo $track within the loop you’ll get each different audio files URL as expected?
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
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 🙂
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 );
Thank you Mediawerk.
Yes that worked perfectly.
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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
The most recent ACF Chat Friday featured a live demo of how to register CPTs directly in the plugin, one of our most requested features. Check out the summary below for a replay of the demo, and don’t forget to register for the next session! https://t.co/k2KQ3WWBAz— Advanced Custom Fields (@wp_acf) March 9, 2023
© 2023 Advanced Custom Fields.