how to implement multi instance jplayers

Question

If there is anyone who has used jplayer before, I need help with this question.

I have multiple jplayers where each player is suppose to play its own audio file. But it is not doing this, if I play a jplayer, then all the jplayers play, all playing that one audio file from the selected jplayers. In fact if I use a control in one jplayer, it controls all the other jplayers as well.

So I am trying to implement a multi instance jplayers which information comes from this:

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

But I am really struggling in able to implement this so my question is can somebody help me finish off the implementation for this so that the jplayers work as it should do and a jplayer just controls its own player only and not affect other jplayers?

Below is the javascript code I have at the moment for this (view source):

<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:

Actual Code:

If there is no audio file, display a blank else for each audio file, display a audio player. I included the html controls as well, not sure if needed but posted it just in case

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

This is code for multiple instance of audio player using jplayer. Following code is working for me. Hope this helps anyone.

$(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
        });
    });
});

Answer 2

You can create a function and pass parameters (file and player id) like this to create different players on the same page without any conflict:

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;
}

In this example, a file and location variable is passed into a wrapper function, which then constructs the player.

and then run the js_audioPlayer() javascript function as many times as you want players:

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

creating Player DIVs with IDs:

jquery_jplayer_1 
jquery_jplayer_2
jquery_jplayer_3

and Interface DIVs with IDs:

jp_interface_1
jp_interface_2
jp_interface_3

Hope this helps.

For more detail: http://www.nightbluefruit.com/blog/2011/08/multiple-jplayers-on-the-same-page/