title: javascript audio seek bar does not update on autoplay
body: <p>I have this javascript audio player coded and working except for the progress bar.  I can get songs to autoplay, but when I do the seek bar doesn't show progress or change the time on click.  This same thing happens when I skip tracks forward or backward.  The progress bar will update if I stop and restart the song using the pause/play buttons however.  I'm getting</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'toggleClass' of undefined
  </code></pre>
  
  <p>error stemming from my jquery-ui file.  Any ideas what might be causing this?  Thank you.</p>
  
  <p>Javascript:</p>
  
  <pre><code>jQuery(document).ready(function() {
  
      // inner variables
      var song;
      var tracker = $('.tracker');
      var volume = $('.volume');
  
      function initAudio(elem) {
          var url = elem.attr('audiourl');
          var title = elem.text();
          var cover = elem.attr('cover');
          var artist = elem.attr('artist');
  
          $('.player .title').text(title);
          $('.player .artist').text(artist);
          $('.player .cover').css('background-image','url(data/' + cover+')');
  
          song = new Audio('data/' + url);
  
          // timeupdate event listener
          song.addEventListener('timeupdate',function (){
              var curtime = parseInt(song.currentTime, 10);
              tracker.slider('value', curtime);
          });
  
          $('.playlist li').removeClass('active');
          elem.addClass('active');
      }
      function playAudio() {
          song.play();
  
          tracker.slider("option", "max", song.duration);
  
          $('.play').addClass('hidden');
          $('.pause').addClass('visible');
      }
      function stopAudio() {
          song.pause();
  
          $('.play').removeClass('hidden');
          $('.pause').removeClass('visible');
      }
  
      // play click
      $('.play').click(function (e) {
          e.preventDefault();
  
          playAudio();
      });
  
      // pause click
      $('.pause').click(function (e) {
          e.preventDefault();
  
          stopAudio();
      });
  
      // forward click
      $('.fwd').click(function (e) {
          e.preventDefault();
  
          stopAudio();
  
          var next = $('.playlist li.active').next();
          if (next.length == 0) {
              next = $('.playlist li:first-child');
          }
          initAudio(next);
          song.load();
          tracker.slider();
          playAudio();
      });
  
      // rewind click
      $('.rew').click(function (e) {
          e.preventDefault();
  
          stopAudio();
  
          var prev = $('.playlist li.active').prev();
          if (prev.length == 0) {
              prev = $('.playlist li:last-child');
          }
          initAudio(prev);
          playAudio();
      });
  
      // show playlist
      $('.pl').click(function (e) {
          e.preventDefault();
  
          $('.playlist').toggle(300);
      });
  
      // playlist elements - click
      $('.playlist li').click(function () {
          stopAudio();
          initAudio($(this));
          playAudio();
      });
  
      // initialization - first element in playlist
      initAudio($('.playlist li:first-child'));
  
      // set volume
      song.volume = 0.8;
  
      // initialize the volume slider
      volume.slider({
          range: 'min',
          min: 1,
          max: 100,
          value: 80,
          start: function(event,ui) {},
          slide: function(event, ui) {
              song.volume = ui.value / 100;
          },
          stop: function(event,ui) {},
      });
  
      // empty tracker slider
      tracker.slider({
          range: 'min',
          min: 0, max: 10,
          start: function(event,ui) {},
          slide: function(event, ui) {
              song.currentTime = ui.value;
          },
          stop: function(event,ui) {}
      });
  
      song.load();
      $('.play').trigger('click');
  
  });
  </code></pre>