-2

我有一个 jplayer 音频播放器，显然它可以播放音频。现在我遇到的问题是，我正在遍历每个问题，一个问题可以有一个、多个或没有音频可以播放。

每个音频都有自己的音频播放器。但是下面这段代码发生的情况是，如果我播放一个音频播放器，其余的其他音频播放器也会播放，它最终会播放所有音频播放器。如何解决此问题，以便如果我播放音频播放器，它只播放和控制该音频播放器？

下面是循环播放每个音频播放器的代码：

        //start:procedure audio
        $aud_result = '';
        if(empty($arrAudioFile[$key])){
          $aud_result = ' ';
        }else{

$j = 0;
foreach ($arrAudioFile[$key] as $a) { 

        $info = pathinfo('AudioFiles/'.$a); 
?>

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
      });
    },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "<?php echo $info['extension'];?>"
  });
}); 
</script>
  <div id="jquery_jplayer_1-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
  <div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface">
        <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
          <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
<?php $j++; 
}

}
//end:procedure audio
?>
4

2 回答 2

2

我现在不能完全运行你的例子，但从它的样子来看，你正在通过循环浏览服务器端的所有音频文件并写出一堆 html/js 在同一页面上加载多个 jPlayer 实例到页面。

我使用 jPlayer 已经有一段时间了，如果我记错了，请原谅，但可能有一些内置功能允许您在其中排队音频文件。

如果我错了，您可以通过使用在音频文件开始/结束时触发的一些提供的事件轻松复制此功能。基本上，使用音频文件的 URL 创建某种 Javascript 数组。开始播放列表中的第一个音频文件。当该文件完成播放时，jPlayer 应该触发某种完成事件。发生这种情况时，将其从您的列表中删除并继续下一个。

这应该可以防止您的歌曲在彼此之上播放，并允许您以您喜欢的任何顺序播放它们。

请记住，您应该只使用您的 PHP 代码来创建 URL 的 JS 列表，或者通过将 JS 写到屏幕上，或者通过某种 AJAX 调用来检索 URL。现在看起来你正在做的是循环遍历你的 HTML 并创建许多不同的 jPlayer 实例，这些实例都在彼此之上播放。

于 2013-02-08T15:31:53.007 回答
0

这是我复制和测试的解决方案：

        //start:procedure audio
        $aud_result = '';
        if(empty($arrAudioFile[$key])){
          $aud_result = '&nbsp;';
        }else{

$j = 0;
foreach ($arrAudioFile[$key] as $a) { 

        $info = pathinfo('AudioFiles/'.$a); 
?>

<script type="text/javascript">   
    $(document).ready(function(){

$("#jquery_jplayer-<?php echo $key.'-'.$j; ?>").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
      });
      $(this).bind($.jPlayer.event.play, function() { 
          $(this).jPlayer("pauseOthers");
        });
    },
    cssSelectorAncestor: "#jp_container_<?php echo $key.'-'.$j; ?>",
    cssSelectorAncestor: "#jp_interface_<?php echo $key.'-'.$j; ?>",
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "<?php echo $info['extension'];?>"
});
}); 
</script>
  <div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
  <div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface" id="jp_interface_<?php echo $key.'-'.$j; ?>">
        <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
          <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
<?php $j++; 
}

}
//end:procedure audio
?>
于 2013-02-09T21:59:25.597 回答