title: Multiple Jplayer audio players from Laravel DB
body: <p>I'm trying to create multiple instances of Jplayers that each play a different audio file from my Laravel Database (table called archives) and i'm stuck at the point the jQuery code meets the Laravel code.</p>
  
  <p>So far the audio players play but they play the same file. </p>
  
  <p>also i have trouble when i navigate deeper into the website. ex: with mydomain.com/segments/ the audio player adds "segments" to the url instead of just the public directory. I know a similar issue can be solved with the URL:asset in Laravel, but i'm not sure how to with this since it's the jquery that's getting the file.</p>
  
  <p><hr>
  This is where i try to create my multiple jplayer instances using a laravel Forloop (i need to start at 2 because player 1 is being used elsewhere)I'm confused about how to mix the Laravel and Jquery code.  </p>
  
  <p>This is all in my footer.blade.php</p>
  
  <pre><code>&lt;!--{{{$counter = 2}}}--&gt;
      @foreach ($archives as $archive)
  
          &lt;script&gt;
          var counter = "{{$counter}}";
          var file = "archiveAudio/{{$archive-&gt;audioFile}}";
  
      $(document).ready(function(){
      $("#jquery_jplayer_"+ counter).jPlayer({
          ready: function () {
              $(this).jPlayer("setMedia", {
                  title: "Hidden",
                  mp3: file,
                  oga: ""
              });
          },
          play: function() { // To avoid multiple jPlayers playing   together.
              $(this).jPlayer("pauseOthers");
          },
          swfPath: "../../js",
          supplied: "mp3, oga",
          cssSelectorAncestor: "#jp_container_" + counter,
          wmode: "window",
          globalVolume: true,
          useStateClassSkin: true,
          autoBlur: false,
          smoothPlayBar: true,
          keyEnabled: true
      });
     counter ++;
  
      });
  
  
          &lt;/script&gt;
  
      @endforeach
  </code></pre>
  
  <p>Home page Blade View (needs to start with #2 player add 1 to the player ID for each player it creates)</p>
  
  <pre><code>&lt;div id="latest"&gt;
      &lt;!--  {{ $count = 2}} --&gt;
      @foreach ($archives as $archive)
          &lt;div class="singleLatest"&gt;
  
              &lt;img src = "/images/segments/{{$archive-&gt;segment-&gt;image}}"   width="100px;"/&gt;
  
      &lt;div class="playerAndInfo"&gt;
                  &lt;h3&gt; {{ $archive-&gt;archiveTitle}}&lt;br&gt;{{$archive-&gt;segment-&gt;name}}&lt;/h3&gt;
  
          &lt;div id="jquery_jplayer_{{$count}}" class="jp-jplayer"&gt;&lt;/div&gt;
                  &lt;div id="jp_container_{{$count}}" class="jp-audio" role="application" aria-label="media player"&gt;
                  &lt;div class="jp-type-single"&gt;
                  &lt;div class="jp-gui jp-interface"&gt;
                  &lt;div class="jp-controls"&gt;
                      &lt;button class="jp-play" role="button" tabindex="0"&gt;play&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="jp-progress"&gt;
                      &lt;div class="jp-seek-bar"&gt;
                          &lt;div class="jp-play-bar"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="jp-time-holder"&gt;
                      &lt;div class="jp-current-time" role="timer" aria-label="time"&gt; &lt;/div&gt;
                      &lt;div class="jp-duration" role="timer" aria-label="duration"&gt; &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="jp-no-solution"&gt;
                      &lt;span&gt;Update Required&lt;/span&gt;
                  To play the media you will need to either update your browser to a recent version or update your &lt;a href="http://get.adobe.com/flashplayer/" target="_blank"&gt;Flash plugin&lt;/a&gt;.
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--end playerAndInfo--&gt;
          &lt;/div&gt; &lt;!-- end single latest --&gt;
  
  &lt;!--  {{ $count = $count +1}} --&gt;
      @endforeach
  &lt;/div&gt;&lt;!-- End latest --&gt;
  </code></pre>
  
  <p>Thanks!</p>