title: Using multiple audio.js playlist players on the same webpage?
body: <p>I am using the  <a href="http://kolber.github.io/audiojs/demos/test6.html" rel="nofollow">kolber.github.io/audiojs/demos/test6.html</a> audio.js playlist player (example 5).  That works great.  However, I would like to use two instances of it on the same page.</p>
  
  <p>I have tried it, and the second instance player just displays a rotating circle (instead of the arrow for play).. and if you select any song from this second group, it plays, but shows up as playing on the first player.</p>
  
  <p>You can see my attempt online here: <a href="http://www.allanzavod.com/test-music3.htm" rel="nofollow">www.allanzavod.com/test-music3.htm</a></p>
  
  <p>Can you tell me if I am missing anything? Or is it <strong>not</strong> possible to have <strong>multiple players</strong> that also have the <strong>playlist option</strong>. (I know you can have multiple players with <em>no playlist</em> - as shown on example 2 of 'Custom markup/css': <a href="http://kolber.github.io/audiojs/demos/test2.html" rel="nofollow">kolber.github.io/audiojs/demos/test2.html</a>).</p>
  
  <p>Originally, I was guessing that the problem was the fact that I had two divs with id="wrapper" (from the original code examples). But I think when I changed the name of the ids, it doesn't gel with the javascript. </p>
  
  <p>Any suggestions? Any help will be appreciated!  </p>
  
  <p>(Sorry, I tried for an hour to get a jsfiddle setup, but just couldn't get the external references to work on it.  Hopefully you can see enough from the live example at:  <a href="http://www.allanzavod.com/test-music3.htm" rel="nofollow">www.allanzavod.com/test-music3.htm</a>)</p>
  
  <p>Here is the code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      $(function() { 
          // Setup the player to autoplay the next track
          var a = audiojs.createAll({
            trackEnded: function() {
              var next = $('ol li.playing').next();
              if (!next.length) next = $('ol li').first();
              next.addClass('playing').siblings().removeClass('playing');
              audio.load($('a', next).attr('data-src'));
              audio.play();
            }
          });
          
          // Load in the first track
          var audio = a[0];
              first = $('ol a').attr('data-src');
          $('ol li').first().addClass('playing');
          audio.load(first);
  
          // Load in a track on click
          $('ol li').click(function(e) {
            e.preventDefault();
            $(this).addClass('playing').siblings().removeClass('playing');
            audio.load($('a', this).attr('data-src'));
            audio.play();
          });
          // Keyboard shortcuts
          $(document).keydown(function(e) {
            var unicode = e.charCode ? e.charCode : e.keyCode;
               // right arrow
            if (unicode == 39) {
              var next = $('li.playing').next();
              if (!next.length) next = $('ol li').first();
              next.click();
              // back arrow
            } else if (unicode == 37) {
              var prev = $('li.playing').prev();
              if (!prev.length) prev = $('ol li').last();
              prev.click();
              // spacebar
            } else if (unicode == 32) {
              audio.playPause();
            }
          })
        });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {padding: 0; margin: 0;} 
  
  
  @font-face {
      font-family: 'BD Graduate';
      src: url('fonts/bdgrad.eot');  /* EOT file for IE */
      src: local('BD Graduate'), url('fonts/bdgrad.ttf') format('truetype');
  }
  
  
  HTML, BODY { 
    scrollbar-base-color: #90373A;
    scrollbar-shadow-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-arrow-color: #000000; 
  }
  
  
  html { 
      height: 100%; 
      margin-bottom: 1px; 
      background-color: #000;
      background-image: url("images/zavod_dark_back3_tile.jpg"); 
      background-attachment: fixed;
      background-repeat: repeat-x;
      background-position: center top;
  }
   
   
  body {
      margin-width: 0px;
      margin-height: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
  /*    background-image: url("images/zavod_dark_back5b.jpg"); */
      background-image: url("images/zavod_dark_back6b.jpg"); 
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-position: center 30px; 
      font-family: Arial, Helvetica, sans-serif;
      color: #B4B4B4; /* sets the default type color */
  }
  
  
  
  a {
   color: #fff;
  /* color: #90373A;  */
   text-decoration: underline;
  }
  
  a:hover {
   color: #FBDDA0;
   text-decoration: none;
  }
  
  a.darklink {
   color: #fff;
   text-decoration: underline;
  }
  
  a.darklink:hover {
   color: #FBDDA0;
   text-decoration: none;
  }
  
  
  
  
  
  p {
   line-height: 140%;
   color: #B4B4B4;
   font-size: 14px;
   font-weight: normal;
  }
  
  
  ul {
   font-size: 14px;
   line-height: 140%;
   font-weight: normal;
      list-style-type: disc;
   display: block;
   float: left;
   text-align: left;
   padding-left: 15px;
   margin-left: 15px;
   margin-right: 10px; 
  }
  
  
  ol {
   font-size: 14px;
   line-height: 140%;
   font-weight: normal;
      list-style-type: disc;
   display: block;
   float: left;
   text-align: left;
   padding-left: 15px;
   margin-left: 15px;
  }
  
  
  
  
  
  #album1wrapper { color: #666; font-family: sans-serif; line-height: 1.4; }
  #album1wrapper h1 { color: #444; font-size: 1.2em; padding: 0px 2px 12px; margin: 0px; }
  #album1wrapper h1 em { font-style: normal; color: #999; }
  #album1wrapper a { color: #888; text-decoration: none; }
  #album1wrapper { width: 400px; margin: 0px auto 40px auto; }
  
  #album1wrapper ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
  #album1wrapper ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
  #album1wrapper ol li a { display: inline-block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
  #album1wrapper li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
  #album1wrapper li.playing a { color: #fff; }
  #album1wrapper li.playing:before { content: '\266C'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); }
  
  @media screen and (max-device-width: 480px) {
  #album1wrapper { position: relative; left: -3%; }
  }
  
  #album2wrapper { color: #666; font-family: sans-serif; line-height: 1.4; }
  #album2wrapper h1 { color: #444; font-size: 1.2em; padding: 0px 2px 12px; margin: 0px; }
  #album2wrapper h1 em { font-style: normal; color: #999; }
  #album2wrapper a { color: #888; text-decoration: none; }
  #album2wrapper { width: 400px; margin: 0px auto 40px auto; }
  
  #album2wrapper ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
  #album2wrapper ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
  #album2wrapper ol li a { display: inline-block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
  #album2wrapper li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
  #album2wrapper li.playing a { color: #fff; }
  #album2wrapper li.playing:before { content: '\266C'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); }
  
  @media screen and (max-device-width: 480px) {
  #album2wrapper { position: relative; left: -3%; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
  
  
  
  &lt;head&gt;
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.allanzavod.com/audiojs/audio.js"&gt;&lt;/script&gt;
   
   
  
  &lt;/head&gt;
  
  &lt;body  OnLoad="window.focus();"&gt;
  
   &lt;br clear="all" /&gt;&lt;br /&gt;
   &lt;br clear="all" /&gt;&lt;br /&gt;
  
   &lt;div id="album1wrapper"&gt;
        &lt;h1&gt;wait what - notorious xx &lt;em&gt;(2009)&lt;/em&gt;&lt;/h1&gt;
        &lt;audio preload&gt;&lt;/audio&gt;
        &lt;ol&gt;
          &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3"&gt;dead wrong intro&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"&gt;juicy-r&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3"&gt;it's all about the crystalizabeths&lt;/a&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
  
   
   
   &lt;br clear="all" /&gt;&lt;br /&gt;
   &lt;br clear="all" /&gt;&lt;br /&gt;
  
   
   &lt;div id="album2wrapper"&gt;
        &lt;h1&gt;wait what - notorious xx &lt;em&gt;(2009)&lt;/em&gt;&lt;/h1&gt;
        &lt;audio preload&gt;&lt;/audio&gt;
        &lt;ol&gt;
          &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3"&gt;infinite victory&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3"&gt;the curious incident of big poppa in the nighttime&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3"&gt;mo stars mo problems&lt;/a&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>