Advanced Custom Fields Repeater with jPlayer Audio Playlist

Question

I hope I’m posting this in the right place. I’m developing a site where user admin add mp3 files to a custom post type through Advanced Custom Fields to display data and add the file URL to the jPlayer, so the files can be played as a jPlayer playlist.

It uses a repeater field “playlist” for the addition of the tracks & their data.

We have 3 sub fields:

1. mp3 (Field type: File for uploading and inserting the audio track itself)
2. Title (Field type: Text)
3. Time (Field type: Text)

In my post template I’m using this php code:

<?php if ( have_rows( 'playlist' ) ) : ?>
    <?php while ( have_rows( 'playlist' ) ) : the_row(); ?>
        <?php if ( get_sub_field( 'mp3' ) ) : ?>
            <a href="<?php the_sub_field( 'mp3' ); ?>"></a>
        <?php endif; ?>
        <?php the_sub_field( 'title' ); ?>
        <?php the_sub_field( 'time' ); ?>
    <?php endwhile; ?>
<?php else : ?>
    <?php // no rows found ?>
<?php endif; ?>

The jPlayer audio interface HTML:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
  <div class="jp-type-single">
    <div class="jp-gui jp-interface">
      <div class="jp-volume-controls">
        <button class="jp-mute" role="button" tabindex="0">mute</button>
        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-controls-holder">
        <div class="jp-controls">
          <button class="jp-play" role="button" tabindex="0">play</button>
          <button class="jp-stop" role="button" tabindex="0">stop</button>
        </div>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
        <div class="jp-toggles">
          <button class="jp-repeat" role="button" tabindex="0">repeat</button>
        </div>
      </div>
    </div>
    <div class="jp-details">
      <div class="jp-title" aria-label="title">&nbsp;</div>
    </div>
    <div class="jp-no-solution">
      <span>Update Required</span>
      To play the media you will need to either update your browser to a recent version or update your <a href="https://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
  </div>
</div>

The JavaScript to instance jPlayer for audio:

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
      ready: function () {
        $(this).jPlayer("setMedia", {
          title: "Bubble",
          m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
          oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
        });
      },
      cssSelectorAncestor: "#jp_container_1",
      swfPath: "/js",
      supplied: "m4a, oga",
      useStateClassSkin: true,
      autoBlur: false,
      smoothPlayBar: true,
      keyEnabled: true,
      remainingDuration: true,
      toggleDuration: true
    });
  });
</script>

In my test post I have created 4 repeater rows comprising of 4 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). What I'm trying is to display this list as a jPlayer audio playlist.

Many Thanks for any help.