title: Add volume bar to HTML 5 audio player
body: <p>I'm new at JavaScript and trying to add a volume bar to my HTML 5 audio player but I'm not having great success. This is what I have so far:</p>
  
  <p>JS:</p>
  
  <pre><code>var VolumeSlider = player.querySelector('.volume-bar');
  VolumeSlider.addEventListener('input', function(){
  audio.volume=this.value;
  step=.01;
  min=0;
  max=1;
  value=1;
  }, false);
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;div class="volume-bar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The above doesn't do anything with adding a volume bar. Link to codepen: <a href="http://codepen.io/openbayou/pen/bgaOGE" rel="nofollow noreferrer">http://codepen.io/openbayou/pen/bgaOGE</a> </p>
  
  <p>Thanks again for the help.</p>