如果选择了一名玩家，如何停止播放所有音频播放器？

Question

我这里有一个演示：demonstration

在演示中，我有2个问题，这些问题它包含jplayer音频播放器，其中它起着属于每个问题的音频。

因此在演示题1中有2段音频，因此为什么有2个音频播放器用于问题1，每个播放器有一个音频文件。问题2中有一个音频播放器，因为它只包含一个音频文件。现在，下面的代码显示了如果一个问题没有音频文件，那么显示一个空白的其他显示每个音频文件的音频播放器。

唯一的问题是，如果你点击一个音频播放器，那么所有的音频播放器正在播放，播放他们的文件。我想要的只是，如果用户使用音频播放器，则只有属于该音频播放器的音频文件才能播放，就是这样。对于其他控件而言，如果用户在音频播放器中使用控件，则该控件只能控制该音频播放器。

但是为了解决这个问题我需要做些什么？

下面是代码：

<?php 

foreach ($arrQuestionId as $key=>$question) { 

?> 

<div class='lt-container'> 
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p> 

<?php 

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

</div> 


<?php 

} 

?> 

UPDATE：

$("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
     <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>" 
     }); 
    }, 
    $(this).bind($.jPlayer.event.play, function() { //ERROR HERE 
     $(this).jPlayer("pauseOthers"); 
    }, 
    solution:"flash,html", 
    swfPath: "jquery", 
    supplied: "<?php echo $info['extension'];?>" 
    }); 

以上代码给我这个错误：缺少：后财产清单

Answer 1

我们就遇到了这个在最近的一个项目。看到这个jPlayer演示：

http://www.jplayer.org/latest/demo-03/

根据这一页，“附加$ .jPlayer.event.play事件处理程序已经被用来避免jPlayers一起玩。”

添加播放功能在jPlayer属性，像这样：

$("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
     <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>" 
     }); 
    }, 
    play: function() { // To avoid both jPlayers playing together. 
     $(this).jPlayer("pauseOthers"); 
    }, 
    solution:"flash,html", 
    swfPath: "jquery", 
    supplied: "<?php echo $info['extension'];?>" 
    });