title: Add active class to LI element in audio player
body: <p>I'm working on my audio player and I have come to the part where I want to add an active class to whichever song is currently playing. However I am sort of confused because I can't seem to properly hook the current song playing after the song ended in my ul( the li's).</p>
  
  <p>This is a link to my private domain so you can get a clearer idea. I hope it's not considered advertising, I don't have anything on the domain but my tests and projects: <a href="http://simeriaionut.com/carols/" rel="nofollow"><strong><em>Link</em></strong></a></p>
  
  <p>So everytime you click a song, the LI get's a class of "active", however if the song ends, the following song doesn't have a class of "active"</p>
  
  <p><a href="http://jsfiddle.net/mjy8dayp/1/" rel="nofollow"><strong><em>JSFiddle HERE</em></strong></a></p>
  
  <p>Okay, if it is of help, I'm going to add the end of track function here:</p>
  
  <pre><code>// Events linstener
  audio.addEventListener("ended", function() { switchTrack(); });
  
  // Functions
  function switchTrack(event){
      $("ul li").removeClass('active');
      if(index == (obj.songsrc.length - 1)){
          index = 0;
      } else {
          index++;    
      }
      playlist_status.innerHTML = obj.title[index];
      playlist_song.innerHTML = obj.songs[index];
      playlist_coverimage.src = "images/"+obj.images[index]+".jpg";
      audio.src = dir+obj.songsrc[index]+ext;
      audio.play();
  }
  </code></pre>
  
  <p>And this is how I create the LI's:</p>
  
  <pre><code>for(var i = 0; i &lt; obj.songsrc.length; i++) {
      li = document.createElement("li");
      li.className = "songs_wrap";
      li.innerHTML = "&lt;div class='songs_inner'&gt;" + "&lt;h4&gt;"+obj.title[i]+ "&lt;/h4&gt;&lt;p&gt;" + obj.songs[i] + "&lt;/p&gt;&lt;/div&gt;";
      mylist.appendChild(li);
      if(audio.play)
      $("li:nth-child(1)").addClass("active");
  }
  </code></pre>