title: Playing song list with jquery and html5 audio
body: <p>I'm trying to make html5 audio player to play list of songs but it plays only two first ones and stops there.</p>
  
  <p>I'm using this to make it play next song after one ends:</p>
  
  <pre><code>$(audio).on("ended", function() {
  audio.pause();
  var next = $('#playlist li.active').next();
  if (next.length == 0) {
      next = $('#playlist li:first-child');
  }
  initAudio(next);
  audio.play();
  showDuration();
  });
  </code></pre>
  
  <p>Can't find out what is the problem here.</p>
  
  <p>EDIT</p>
  
  <p>Whole code:</p>
  
  <p>JS</p>
  
  <pre><code>var audio;
  
  $('#pause').hide();
  
  initAudio($('#playlist li:first-child'));
  
  function initAudio(element){
  var song = element.attr('song');
  var title = element.attr('songtitle');
  var artist = element.attr('artist');
  
  audio = new Audio('audio/' + song);
  
  if(!audio.currentTime){
      $('#duration').html('0:00');
  }
  
  $('#audio-player .title').text(title);
  $('#audio-player .artist').text(artist);
  
  $('#playlist li').removeClass('active');
  element.addClass('active');
  }
  
  $('#play').click(function(){
  audio.play();
  $('#play').hide();
  $('#pause').show();
  showDuration();
  });
  
  $('#pause').click(function(){
  audio.pause();
  $('#pause').hide();
  $('#play').show();
  });
  
  $(audio).on("ended", function() {
  audio.pause();
  var next = $('#playlist li.active').next();
  if (next.length == 0) {
      next = $('#playlist li:first-child');
  }
  initAudio(next);
  audio.play();
  showDuration();
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="audio-player"&gt;
      &lt;button id="play"&gt;&lt;/button&gt;
      &lt;button id="pause"&gt;&lt;/button&gt;
      &lt;ul id="playlist"&gt;
          &lt;li song="song1.wav" songtitle="Song1" artist="Artist1"&gt;&lt;/li&gt;
          &lt;li song="song2.wav" songtitle="Song2" artist="Artist2"&gt;&lt;/li&gt;
          &lt;li song="song3.wav" songtitle="Song3" artist="Artist3"&gt;&lt;/li&gt;
          &lt;li song="song4.wav" songtitle="Song4" artist="Artist4"&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="audio-info"&gt;
      &lt;span class="artist"&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;span class="title"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>