如何實現多實例jplayers

如果有人曾經使用jplayer，我需要幫助解決這個問題。如何實現多實例jplayers

我有多個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 = '&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; ?>" 
     }); 
     $(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 
?>

來源

2013-02-09 user2056342

您可以創建一個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

希望這有助於。

來源

2013-02-09 05:16:42 AlphaMale

很好的答案，但從技術角度來說，這不能說是動態創建div的技術準確性;相反，它會動態地從HTML中現有的div創建jPlayer實例。當然，動態創建基於模板的div是可能的。 – 2013-02-09 05:28:02

你是對的馬特。:)我其實是指jplayer實例。 – AlphaMale 2013-02-09 05:31:54

@AlphaMale我很努力地在我的實際代碼中實現這一點，在我的實際代碼中它爲每個循環使用了一點php，我可以告訴你一個更新顯示我的實際代碼（正如我顯示的視圖源代碼），你可以幫我一個很大的忙，並在你的回答中包括如何實現我的實際代碼？這是一個很大的好處，我問，但真正感謝它，如果你能爲我做到這一點 – user2056342 2013-02-09 07:36:35

這是使用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 
     }); 
    }); 
});

來源

2015-06-08 06:56:45

如何實現多實例jplayers

回答

相關問題