title: Creating an audio step / beat viewer with audio currentTime milliseconds Jquery
body: <p>I am working on a step sequencer / viewer that plays back a 120bpm beat (2 beats per second) and when it hits the fractions of a second it should light up the div / box accordingly. It is not working like intended... I read that currentTime should support milliseconds but something is not right. <a href="https://stackoverflow.com/questions/44445812/is-it-possible-to-get-the-current-html5-video-timeframe-with-millisecondsIt">Is it possible to get the current html5 video timeframe with milliseconds?</a> just instantly lights up all the pads red as soon as it plays and doesn't remove the red when it is not on that step / beat.</p>
  
  <pre><code>&lt;div class="block"&gt;
      &lt;div class="pad p1"&gt;&lt;/div&gt;
      &lt;div class="pad p2"&gt;&lt;/div&gt;    
      &lt;div class="pad p3"&gt;&lt;/div&gt;    
      &lt;div class="pad p4"&gt;&lt;/div&gt;    
      &lt;div class="pad p5"&gt;&lt;/div&gt;    
      &lt;div class="pad p6"&gt;&lt;/div&gt;    
      &lt;div class="pad p7"&gt;&lt;/div&gt;    
      &lt;div class="pad p8"&gt;&lt;/div&gt;    
  &lt;/div&gt;
  
  &lt;audio id="beat" controls loop autoplay&gt;
  &lt;source src="beattest.wav" type="audio/wav"&gt;
  &lt;/audio&gt;
  
  
     &lt;script&gt;
      if (beat.currentTime &lt; 0.25) {
  
              $(".p1").css("background-color", "red");
              $(".pad").not(".p1").css("background-color", "#0c2216");
      }
      if (beat.currentTime &lt; 0.5) {
  
              $(".p2").css("background-color", "red");
              $(".pad").not(".p2").css("background-color", "#0c2216");
      }
      if (beat.currentTime &lt; 0.75) {
  
              $(".p3").css("background-color", "red");
              $(".pad").not(".p3").css("background-color", "#0c2216");
      }
      if (beat.currentTime &lt; 1) {
  
              $(".p4").css("background-color", "red");
              $(".pad").not(".p4").css("background-color", "#0c2216");
      }
     &lt;/script&gt;
  </code></pre>
  
  <p>I also tried with no luck so far:</p>
  
  <pre><code>        var audio = document.getElementById('beat');
  audio.addEventListener('timeupdate',function(){
      window.currentTimeMs = audio.currentTime*1000;
      console.log(currentTimeMs);
      if (beat.currentTimeMs &lt; 250) {
  
          $(".p1").css("background-color", "red");
          $(".pad").not(".p1").css("background-color", "#0c2216");
      console.log('1');
  }
  if (beat.currentTimeMs &lt; 500) {
  
          $(".p2").css("background-color", "red");
          $(".pad").not(".p2").css("background-color", "#0c2216");
  }
  
  },false);
  </code></pre>