如何实现多实例jplayers

Question

如果有人曾经使用jplayer，我需要帮助解决这个问题。

我有多个jplayers，每个播放器都假设播放自己的音频文件。但它并不是这样做的，如果我玩jplayer，那么所有jplayers都会玩，都会从选定的jplayers播放一个音频文件。事实上，如果我在一个jplayer中使用控件，它也会控制所有其他jplayers。

所以我想实现多实例jplayers其信息来源于此：

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

但我真的能够努力实现这个，所以我的问题是有人可以帮我玩完了为了让玩家能够像它应该做的那样工作，jplayer只控制自己的玩家而不影响其他玩家？

下面是javascript代码我目前所面对的这个（查看源代码）：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#jquery_jplayer_1-72-0").jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
     mp3: "AudioFiles/Kalimba.mp3" 
     }); 
    }, 
    play: function() { // To avoid both jPlayers playing together. 
     $(this).jPlayer("pauseOthers"); 
    }, 
    solution:"flash,html", 
    swfPath: "jquery", 
    supplied: "mp3" 
    }); 
}); 
</script> 

UPDATE：

实际代码：

如果没有音频文件，显示每个音频文件的其他空白，显示音频播放器。我包含在HTML控件以及，如果需要的话不知道，但贴吧，以防万一

 //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; ?>" 
     }); 
     $(this).bind($.jPlayer.event.play, function() { 
      $(this).jPlayer("pauseOthers"); 
     }); 
    }, 
    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

您可以创建一个function和传递参数（file and player id）像这样没有任何冲突，以创造在同一页上不同的球员：

function js_audioPlayer(file,location) { 
    jQuery("#jquery_jplayer_" + location).jPlayer({ 
     ready: function() { 
      jQuery(this).jPlayer("setMedia", { 
     mp3: file 
      }); 
     }, 
     cssSelectorAncestor: "#jp_interface_" + location, 
     swfPath: "/swf" 
    }); 
     return; 
} 

在这个例子中，一个文件和位置变量传递到包装器的功能，其然后构造播放器。

，然后运行js_audioPlayer() javascript函数多次，你想要的球员：

js_audioPlayer('file1.mp3',1); //Player 1 
js_audioPlayer('file2.mp3',2); //Player 2 
js_audioPlayer('file3.mp3',3); //Player 3 

使用标识创建播放器的DIV：

jquery_jplayer_1 
jquery_jplayer_2 
jquery_jplayer_3 

和接口的div的ID：

jp_interface_1 
jp_interface_2 
jp_interface_3 

希望这有助于。

更多细节：http://www.nightbluefruit.com/blog/2011/08/multiple-jplayers-on-the-same-page/

Answer 2

这是使用jplayer音频播放器的多个实例代码。 以下代码正在为我工​​作。希望这有助于任何人。

$(document).ready(function(){ 
    /*---Create a jplayer instance on click on the play image---*/ 

    $(".audio").click(function() { 
     $.jPlayer.pause(); 
     var record_id = this.id; 
     var path = 'path for the audio file'; 
     $("#jquery_jplayer_"+record_id).jPlayer({ 
      ready: function (event) { 
       $(this).jPlayer("setMedia", { 
        title: "Bubble", 
        oga: path, 
       }); 
      }, 
      cssSelectorAncestor: "#jp_container_"+record_id, 
      supplied: "oga", 
      wmode: "window", 
      errorAlerts: true, 
      consoleAlerts: true, 
      warningAlerts: true, 
      useStateClassSkin: true, 
      autoBlur: false, 
      smoothPlayBar: true, 
      keyEnabled: true, 
      remainingDuration: true, 
      toggleDuration: true 
     }); 
    }); 
});