title: How to loop audio playlist?
body: <p>I really love this pen <a href="https://codepen.io/himalayasingh/pen/QZKqOX" rel="nofollow noreferrer">https://codepen.io/himalayasingh/pen/QZKqOX</a> and have been having lots of fun tinkering around with this audio player, but I can't for the life of me seem to get it to loop through the playlist properly. after every track the audio stops, I've been able to get the selected track to loop but not loop through the entire playlist. any insight?</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()
  {
      var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl, albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'), sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'), sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"),  i = playPauseButton.find('i'), tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = ['Dawn','Me &amp; You','Electro Boy','Home','Proxy (Original Mix)'], trackNames = ['Skylike - Dawn','Alex Skrindo - Me &amp; You','Kaaze - Electro Boy','Jordan Schor - Home','Martin Garrix - Proxy'], albumArtworks = ['_1','_2','_3','_4','_5'], trackUrl = ['https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/1.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/3.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/4.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/5.mp3'], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;
  
      function playPause()
      {
          setTimeout(function()
          {
              if(audio.paused)
              {
                  playerTrack.addClass('active');
                  albumArt.addClass('active');
                  checkBuffering();
                  i.attr('class','fas fa-pause');
                  audio.play();
              }
              else
              {
                  playerTrack.removeClass('active');
                  albumArt.removeClass('active');
                  clearInterval(buffInterval);
                  albumArt.removeClass('buffering');
                  i.attr('class','fas fa-play');
                  audio.pause();
              }
          },300);
      }
  
       
   function showHover(event)
   {
    seekBarPos = sArea.offset(); 
    seekT = event.clientX - seekBarPos.left;
    seekLoc = audio.duration * (seekT / sArea.outerWidth());
    
    sHover.width(seekT);
    
    cM = seekLoc / 60;
    
    ctMinutes = Math.floor(cM);
    ctSeconds = Math.floor(seekLoc - ctMinutes * 60);
    
    if( (ctMinutes &lt; 0) || (ctSeconds &lt; 0) )
     return;
    
          if( (ctMinutes &lt; 0) || (ctSeconds &lt; 0) )
     return;
    
    if(ctMinutes &lt; 10)
     ctMinutes = '0'+ctMinutes;
    if(ctSeconds &lt; 10)
     ctSeconds = '0'+ctSeconds;
          
          if( isNaN(ctMinutes) || isNaN(ctSeconds) )
              insTime.text('--:--');
          else
        insTime.text(ctMinutes+':'+ctSeconds);
              
    insTime.css({'left':seekT,'margin-left':'-21px'}).fadeIn(0);
    
   }
  
      function hideHover()
   {
          sHover.width(0);
          insTime.text('00:00').css({'left':'0px','margin-left':'0px'}).fadeOut(0);  
      }
      
      function playFromClickedPos()
      {
          audio.currentTime = seekLoc;
    seekBar.width(seekT);
    hideHover();
      }
  
      function updateCurrTime()
   {
          nTime = new Date();
          nTime = nTime.getTime();
  
          if( !tFlag )
          {
              tFlag = true;
              trackTime.addClass('active');
          }
  
    curMinutes = Math.floor(audio.currentTime / 60);
    curSeconds = Math.floor(audio.currentTime - curMinutes * 60);
    
    durMinutes = Math.floor(audio.duration / 60);
    durSeconds = Math.floor(audio.duration - durMinutes * 60);
    
    playProgress = (audio.currentTime / audio.duration) * 100;
    
    if(curMinutes &lt; 10)
     curMinutes = '0'+curMinutes;
    if(curSeconds &lt; 10)
     curSeconds = '0'+curSeconds;
    
    if(durMinutes &lt; 10)
     durMinutes = '0'+durMinutes;
    if(durSeconds &lt; 10)
     durSeconds = '0'+durSeconds;
          
          if( isNaN(curMinutes) || isNaN(curSeconds) )
              tProgress.text('00:00');
          else
        tProgress.text(curMinutes+':'+curSeconds);
          
          if( isNaN(durMinutes) || isNaN(durSeconds) )
              tTime.text('00:00');
          else
        tTime.text(durMinutes+':'+durSeconds);
          
          if( isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds) )
              trackTime.removeClass('active');
          else
              trackTime.addClass('active');
  
          
    seekBar.width(playProgress+'%');
    
    if( playProgress == 100 )
    {
     i.attr('class','fa fa-play');
     seekBar.width(0);
              tProgress.text('00:00');
              albumArt.removeClass('buffering').removeClass('active');
              clearInterval(buffInterval);
    }
      }
      
      function checkBuffering()
      {
          clearInterval(buffInterval);
          buffInterval = setInterval(function()
          { 
              if( (nTime == 0) || (bTime - nTime) &gt; 1000  )
                  albumArt.addClass('buffering');
              else
                  albumArt.removeClass('buffering');
  
              bTime = new Date();
              bTime = bTime.getTime();
  
          },100);
      }
  
      function selectTrack(flag)
      {
          if( flag == 0 || flag == 1 )
              ++currIndex;
          else
              --currIndex;
  
          if( (currIndex &gt; -1) &amp;&amp; (currIndex &lt; albumArtworks.length) )
          {
              if( flag == 0 )
                  i.attr('class','fa fa-play');
              else
              {
                  albumArt.removeClass('buffering');
                  i.attr('class','fa fa-pause');
              }
  
              seekBar.width(0);
              trackTime.removeClass('active');
              tProgress.text('00:00');
              tTime.text('00:00');
  
              currAlbum = albums[currIndex];
              currTrackName = trackNames[currIndex];
              currArtwork = albumArtworks[currIndex];
  
              audio.src = trackUrl[currIndex];
              
              nTime = 0;
              bTime = new Date();
              bTime = bTime.getTime();
  
              if(flag != 0)
              {
                  audio.play();
                  playerTrack.addClass('active');
                  albumArt.addClass('active');
              
                  clearInterval(buffInterval);
                  checkBuffering();
              }
  
              albumName.text(currAlbum);
              trackName.text(currTrackName);
              albumArt.find('img.active').removeClass('active');
              $('#'+currArtwork).addClass('active');
              
              bgArtworkUrl = $('#'+currArtwork).attr('src');
  
              bgArtwork.css({'background-image':'url('+bgArtworkUrl+')'});
          }
          else
          {
              if( flag == 0 || flag == 1 )
                  --currIndex;
              else
                  ++currIndex;
          }
      }
  
      function initPlayer()
   { 
          audio = new Audio();
  
    selectTrack(0);
    
    audio.loop = false;
    
    playPauseButton.on('click',playPause);
    
    sArea.mousemove(function(event){ showHover(event); });
    
          sArea.mouseout(hideHover);
          
          sArea.on('click',playFromClickedPos);
    
          $(audio).on('timeupdate',updateCurrTime);
  
          playPreviousTrackButton.on('click',function(){ selectTrack(-1);} );
          playNextTrackButton.on('click',function(){ selectTrack(1);});
   }
      
   initPlayer();
  });</code></pre>
  </div>
  </div>
  </p>