title: jplayer multiple instances one page - however the amount is variable
body: <p>I am currently working with jPlayer to give the user some audio playback, if they wish to hear an audio sample, there is a slight complication in that the user first all creates a search, that can return a variable amount of audio files on the results page.</p>
  
  <p>I have looked at the docs for jPlayer and it looks like you need to create a jPlayer instance for each audio file you wish to play, their examples are hard coded, which is great if you know that you will get the same number of results everytime you search for a sample. However for me 1 search could return 1 clip while another search could return 60 clips.</p>
  
  <p>I have tried to implement multiple instances of jplayer like this, but to no avail as I get no audio output.</p>
  
  <pre><code>$('.jp-audio').each(function(index) {
          var count = index+1;
          $(this).attr("id", "jp_container_"+count)
          $(".jp-stop").hide();
          $("#jquery_jplayer_"+index+1).jPlayer({
                  ready: function () {
                      $(this).jPlayer("setMedia", {
                          mp3:$(this).find('a.jp-play').attr('rel'),
                          wav:$(this).find('a.jp-play').attr('rel')
                      });
                  },
                  play: function() { // To avoid both jPlayers playing together.
                      $(this).jPlayer("pauseOthers");
                  },
                  swfPath: "/media/js/jPlayer",
                  solution: "flash, html",
                  supplied: "mp3, wav",
                  wmode: "window",
                  preload: "auto"
              });
          $('body').append("&lt;div id='jquery_jplayer_"+count+"' class='jp-jplayer'&gt;&lt;/div&gt;");
      });
  </code></pre>
  
  <p>How can I create a new jplayer instance for each of my audio clips? Below is the example from the Docs, </p>
  
  <pre><code>$("#jquery_jplayer_1").jPlayer({
      ready: function () {
          $(this).jPlayer("setMedia", {
              m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a",
              oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
          });
      },
      play: function() { // To avoid both jPlayers playing together.
          $(this).jPlayer("pauseOthers");
      },
      repeat: function(event) { // Override the default jPlayer repeat event handler
          if(event.jPlayer.options.loop) {
              $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
              $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                  $(this).jPlayer("play");
              });
          } else {
              $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
              $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                  $("#jquery_jplayer_2").jPlayer("play", 0);
              });
          }
      },
      swfPath: "../js",
      supplied: "m4a, oga",
      wmode: "window"
  });
  
  $("#jquery_jplayer_2").jPlayer({
      ready: function () {
          $(this).jPlayer("setMedia", {
              m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a",
              oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
          });
      },
      play: function() { // To avoid both jPlayers playing together.
          $(this).jPlayer("pauseOthers");
      },
      repeat: function(event) { // Override the default jPlayer repeat event handler
          if(event.jPlayer.options.loop) {
              $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
              $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                  $(this).jPlayer("play");
              });
          } else {
              $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
              $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                  $("#jquery_jplayer_1").jPlayer("play", 0);
              });
          }
      },
      swfPath: "../js",
      supplied: "m4a, oga",
      cssSelectorAncestor: "#jp_container_2",
      wmode: "window"
  });
  
  $("#jquery_jplayer_3").jPlayer({
      ready: function () {
          $(this).jPlayer("setMedia", {
              m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
              oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
          });
      },
      play: function() { // To avoid both jPlayers playing together.
          $(this).jPlayer("pauseOthers");
      },
      swfPath: "../js",
      supplied: "m4a, oga",
      cssSelectorAncestor: "#jp_container_3",
      wmode: "window"
  });
  
  $("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
  $("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
  $("#jplayer_inspector_3").jPlayerInspector({jPlayer:$("#jquery_jplayer_3")});
  </code></pre>
  
  <p>taken from the source at, </p>
  
  <p><a href="http://jplayer.org/latest/demo-03/" rel="nofollow">http://jplayer.org/latest/demo-03/</a></p>