如何將音頻播放器正確工作在循環中？

Question

我有一個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 
?> 

Answer 1

我不是很正確，現在運行你的例子，但它是什麼樣子，你就裝在同一個多jPlayer實例頁面循環瀏覽服務器端的所有音頻文件，並在頁面中寫出一堆html/js。

我已經使用jPlayer已經有一段時間了，所以請原諒，如果我誤解了這一點，但可能有一些內置的功能允許您在其中排列音頻文件。

如果我錯了，可以使用一些提供的事件輕鬆地複製此功能，這些事件在音頻文件開始/結束時觸發。基本上，用音頻文件的URL創建一些Javascript數組。開始播放列表中的第一個音頻文件。當該文件播放完畢時，jPlayer應該發出某種完成的事件。發生這種情況時，請將其從列表中移除並轉到下一個列表。

這應該讓你避免讓歌曲互相播放，讓你可以按照自己喜歡的順序播放歌曲。

請記住，您應該只使用您的PHP代碼來創建該URL的JS列表，可以通過將JS寫入屏幕或通過某種AJAX調用來檢索URL。看起來您現在正在做的是循環遍歷HTML並創建許多不同的jPlayer實例，這些實例都是相互重疊的。

Answer 2

這是我所複製和測試解決方案：

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