Wordpress Advanced Custom Fields repeater display title outsite of loop - php

Question

So I have a mediaelement.js audio player and I'm using the advanced custom fields plugin and I want to be able to display the title of the current track on the player, here's my code
<audio class="mejs-new" style="width: 100%; height: auto;" controls width="100%" height="auto">
<?php if(get_field('audio_repeater')): ?>
<?php while(has_sub_field('audio_repeater')): ?>
<?php $title = get_sub_field('music_title'); ?>
<source src="<?php the_sub_field('music_url'); ?>" title="<?php echo $title; ?>" type="audio/mp3">
<p><?php echo $title; ?></p>
<?php endwhile; ?>
<?php endif; ?>
</audio>
Edit..
I have tried echoing the title outside the audio tag but it only echoes the 2nd track title and won't change when changing tracks.

Answer 1

If I understand correctly, you're wanting to move the title outside the <audio /> tag, but you can only get the title from within the loop.
You're almost there actually - the easiest way to do this is to set the title to a variable while you're in the loop, which you're already doing ($title = get_sub_field('music_title');). So now, all you need to do is echo the variable when you need it.
Because you've already set the variable while you had access to the functions in the loop, you can now echo that variable afterwards without needing the loop.
For example:
<?php endif; ?>
</audio>
<p><?php echo $title; ?></p>
EDIT:
I assumed you only had one title and I didn't question why you were using a repeater with one title :) To print out a list of the titles afterwards, you can use a similar approach, except this time you need to save the results of the loop and then loop through it again.
The easiest way to do this is to repeat the entire loop code but only print out the title, but that's a little inefficient. Ideally, we should only be getting the field once. Here's another way to do the whole thing:
<?php $audio_repeater = get_field("audio_repeater"); ?>
<audio class="mejs-new" style="width: 100%; height: auto;" controls width="100%" height="auto">
<?php if((array) count($audio_repeater)): ?>
<?php foreach($audio_repeater as $audio_source): ?>
<source src="<?php echo $audio_source["music_url"]; ?>" title="<?php echo $audio_source["music_title"]; ?>" type="audio/mp3">
<?php endforeach; ?>
<?php endif; ?>
</audio>
<?php foreach($audio_repeater as $audio_source): ?>
<p><?php echo $audio_source["music_title"]; ?></p>
<?php endforeach; ?>
In this example, we're grabbing the entire ACF repeater once at the top, and assigning it to a variable. We're then checking it has items in it, and looping through those items.
This is an alternative way to use ACF repeaters, which might not quite be as easy as using the loop functions, but it is more extensible when you're moving things around a bit.