如何使音频播放器在循环中正常工作

我现在还不能完全运行您的示例，但从外观上看，您正在同一页面上加载多个jPlayer实例，方法是循环浏览服务器端的所有音频文件，并在页面上写出一堆html/js。

我已经有一段时间没有使用jPlayer了，所以如果我记错了，请原谅我，但可能有一些内置功能可以让你在里面排队音频文件。

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

这样可以防止歌曲重叠播放，并允许你按照自己喜欢的顺序播放。

记住，你应该只使用你的PHP代码来创建URL的JS列表，要么把JS写到屏幕上，要么通过某种AJAX调用来检索URL。看起来你现在正在做的是在HTML上循环，并创建许多不同的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-<?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
?>