title: How can I constantly update the duration of this mp3 file I'm playing with JS? The progress bar does not work
body: <p>This is script from an audio player. I got from the Jquery cookbook that I can't seem to get working. I'm really stumped and would appreciate any help.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-        ui.css" rel="stylesheet" type="text/css"/&gt;
   &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;          &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;script&gt;
  
  
  var $audio = $('audio');
  console.log($audio);
  var audioEl = $audio[0];
  console.log(audioEl);
  var secondsTotal = audioEl.currentTime;
  console.log(secondsTotal);
  var audio = {
  currentTime: 0,
  duration: secondsTotal,
  volume: 0.5,
  set: function(key, value) {
  this[key] = value; 
  try { audioEl[key] = value; } catch(e) {}
  
  
  
      if (key != 'currentTime') {
      $audio.trigger('timeupdate');
      }
      if (key != 'volume') {
      $audio.trigger('volumechange');
      }
      },
      play: function() {
      audioEl.play &amp;&amp; audioEl.play();
      },
      pause: function() {
      audioEl.pause &amp;&amp; audioEl.pause();
      }
      };
      console.log(audio);
      $audio.bind('timeupdate', function() {
      audio.currentTime = audioEl.currentTime;
      });
      audio.set('currentTime', 0);
      audio.set('volume', 0.5);
  
      //end compatibility layer
  
      //play pause button
  
  
      var $audio = $('audio'), audioEl = $audio[0];
      var audio = {
      currentTime: 0,
      duration: secondsTotal,
      volume: 0.5,
      set: function(key, value) {
      this[key] = value;
      try { audioEl[key] = value; } catch(e) {}
      if (key == 'currentTime') {
      $audio.trigger('timeupdate');
      }
      if (key == 'volume') {
      $audio.trigger('volumechange');
      }
      },
      play: function() {
      audioEl.play &amp;&amp; audioEl.play();
      },
      pause: function() {
      audioEl.pause &amp;&amp; audioEl.pause();
      }
      };
  
      $audio.bind('timeupdate', function() {
      audio.currentTime = audioEl.currentTime;
      });
      audio.set('currentTime', 0);
      audio.set('volume', 0.5);
  
      //end compatibility layer
  
      //play pause button
  
  
      $('.mplayer .playpause').click(function() {
      var player = $(this).parents('.mplayer');
      if (player.is('.paused')) {
      $('.mplayer').removeClass('paused');
      audio.play();
      } else {
      $('.mplayer').addClass('paused');
      audio.pause();
      }
      return false;
      })
      .hover(function() { $(this).addClass('ui-state-hover'); },
      function() { $(this).removeClass('ui-state-hover'); })
      .focus(function() { $(this).addClass('ui-state-focus'); })
      .blur(function() { $(this).removeClass('ui-state-focus'); });
      $('.mplayer').addClass('paused');
  
  
      // current and total time labels
  
      function minAndSec(sec) {
      sec = parseInt(sec);
      return Math.floor(sec / 60) + ":" + (sec % 60 &lt; 10 ? '0' : '') +
      Math.floor(sec % 60);
      }
      $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
      $('.mplayer .duration').text(minAndSec(secondsTotal));
      $audio.bind('timeupdate', function(event) {
      $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
      });
  
      // slider
  
      $('.mplayer .track').slider({
      range: 'min',
      max: audio.duration,
      slide: function(event, ui) {
      $('.ui-slider-handle', this).css('margin-left',
      (ui.value &lt; 3) ? (1 - ui.value) + 'px' : '');
      if (ui.value &gt;= 0 &amp;&amp; ui.value &lt;= audio.duration) {
      audio.set('currentTime', ui.value);
      }
      },
      change: function(event, ui) {
      $('.ui-slider-handle', this).css('margin-left',
      (ui.value &lt; 3) ? (1 - ui.value) + 'px' : '');
      }
      })
      .find('.ui-slider-handle').css('margin-left', '0').end()
      .find('.ui-slider-range').addClass('ui-corner-left').end();
      $audio.bind('timeupdate', function(event) {
      $('.mplayer .track').bind(function() {
      if ($(this).slider('value') != audio.currentTime) {
      $(this).slider('value', audio.currentTime);
      }
      });
      $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
      });
  
      //
      var secondsCached = 0, cacheInterval;
      $('.mplayer .track').progressbar({
      value: secondsCached / secondsTotal * 100
      })
      $('.mplayer .track').find('.ui-progressbar-value').css('opacity', 0.2).end();
      cacheInterval = setInterval(function() {
      secondsCached += 2;
      if (secondsCached &gt; secondsTotal) clearInterval(cacheInterval);
      $('.mplayer .track.ui-progressbar').progressbar('value', secondsCached / secondsTotal * 100);
      }, 30);
  
      //volume control
  
      $('.mplayer .volume').slider({
      max: 1,
      orientation: 'vertical',
      range: 'min',
      step: 0.01,
      value: audio.volume,
      start: function(event, ui) {
      $(this).addClass('ui-slider-sliding');
      $(this).parents('.ui-slider').css({
      'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
      'height': '100px'
      }).find('.ui-slider-range').show();
      },
      slide: function(event, ui) {
      if (ui.value &gt;= 0 &amp;&amp; ui.value &lt;= 1) {
      audio.set('volume', ui.value);
      }
      $(this).css({
      'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
      'height': '100px'
      }).find('.ui-slider-range').show();
      },
      stop: function(event, ui) {
      $(this).removeClass('ui-slider-sliding');
      var overHandle = $(event.originalEvent.target)
      .closest('.ui-slider-handle').length &gt; 0;
      if (!overHandle) {
      $(this).css({
      'margin-top': '',
      'height': ''
      }).find('.ui-slider-range').hide();
      }
      },
      change: function(event, ui) {
      if (ui.value &gt;= 0 &amp;&amp; ui.value &lt;= 1) {
      if (ui.value != audio.volume) {
      audio.set('volume', ui.value);
      }
      }
      }
      })
      .mouseenter(function(event) {
      if ($('.ui-slider-handle.ui-state-active').length) {
      return;
      }
      $(this).css({
      'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
      'height': '100px'
      }).find('.ui-slider-range').show();
      })
      .mouseleave(function() {
      $(this).not('.ui-slider-sliding').css({
      'margin-top': '',
      'height': ''
      }).find('.ui-slider-range').hide();
      })
      .find('.ui-slider-range').addClass('ui-corner-bottom').hide().end();
  
  
  
  
  
  $('.mplayer').each(function() {
  $('.bg:first', this).css('opacity', 0.7);
  $('.bg:last', this).css('opacity', 0.3);
  })
  $('.mplayer .rod').css('opacity', 0.4);
  $('.mplayer .hl').css('opacity', 0.25);
  $('.mplayer .hl2').css('opacity', 0.15);
  });
  
  &lt;/script&gt;
  </code></pre>