title: TypeError: player.bind is not a function - jQuery
body: <p>I cant seem to get this to work, all I am trying to do is make it so that this div's width increases as the audio player is playing so it acts as a progress bar. Everytime I run the script I get this in the console:</p>
  
  <blockquote>
    <p>TypeError: player.bind is not a function</p>
  </blockquote>
  
  <p>Here is my Javascript:</p>
  
  <pre><code>var player = document.getElementById('audio_player');
  var progress = document.getElementsByClassName('progress-bar');
  $(".play_btn").click(function() {
    if(player.paused) {
      player.play();
    } else {
      player.pause();
    }
    $(this).toggleClass('pause');
  });
  $(function() {
      var check,
          reached25 = false,
          reached50 = false,
          reached75 = false;
  
      player.bind("play", function(event) {
          var duration = player.get(0).duration;
  
          check = setInterval(function() {
              var current = player.get(0).currentTime,
                  perc = (current / duration * 100).toFixed(2);
  
  
              if (Math.floor(perc) &gt;= 25 &amp;&amp;! reached25) {
                  console.log("25% reached");
                  reached25 = true;
              }
              console.log(perc);
      }, 500);
  });
  
  player.bind("ended pause", function(event) {
      clearInterval(check);
  });
  
  });
  </code></pre>