带有 jPlayer 音频播放列表的高级自定义字段中继器

编程问答 2022-05-16

问题描述

我希望我把这个贴在正确的地方。 我正在开发一个网站，用户管理员通过高级自定义字段将 mp3 文件添加到自定义帖子类型以显示数据并将文件 URL 添加到 jPlayer，因此文件可以作为 jplayer 播放列表播放。>

它使用中继器字段“播放列表”来添加曲目及其数据。

我们有 3 个子字段：

  1. mp3（字段类型：用于上传和插入音轨本身的文件）
  2. 标题（字段类型：文本）
  3. 时间（字段类型：文本）

在我的帖子模板中，我使用了这个 PHP 代码：

<?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; ?>

jplayer 音频界面 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>

为音频实例化 jplayer 的 JavaScript：

<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>

在我的测试帖子中，我创建了 4 个中继器行，其中包含 4 个不同的音轨，每个音轨都有数据，我将它们全部显示在列表的前面没问题（ACF 设置为将音轨显示为文件URL 不是数组）。我正在尝试将此列表显示为 jplayer 音频播放列表。

非常感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

advanced-custom-fieldsaudiojplayerjquerywordpress