title: Creating a volume bar javascript
body: <p>I need to create an audio player, and I can't see how to convert it to javascript.</p>
  
  <p>This is what I have so far...</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;audio id="music" src="http://www.sousound.com/music/healing/healing_01.mp3" 
         data-title="Title of the audio" data-author="Author's name"&gt;&lt;/audio&gt;
  &lt;span class="volumeScaleHolder"&gt;
    &lt;span id="progressBar"&gt;
       &lt;span id="myVolume"&gt;&lt;/span&gt;
    &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#progressBar {
   width: 100%;
  height: 8px;
  background-color: #666666;
  display: inline-block;
  }
  #myVolume {
    width: 10%;
    height: 100%;
    background-color: #B4BB6B; 
    display:block;
  }
      border: 0;
  }
  .volumeScaleHolder {
      padding:0;
      margin: 3px 0;
  }
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>var audio = document.getElementById("music");
  var audioVolumeBar = document.getElementById("progressBar");
  var myVolumeBar = document.getElementById("myVolume");
  var audioVolume = audio.volume;
  
  function volumeAsProgressBar(volume) {
      var audioVolumeProgressBar = document.getElementById("progressBar");
      var audioVolumeMyBar = document.getElementById("myVolume");
      var volume = audioVolume;
      var totalVolume = 1; 
      var minVolume = 0;
      var maxVolume = 1;
  }
  alert(audio.volume);  
  
  myVolumeBar.innerHTML = myVolumeBar.innerHTML + volumeAsProgressBar(audioVolume);
  </code></pre>
  
  <p>I know the javascript is doing nothing. It is because I don't know how to proceed. So what I am trying to do is to check the value of the audio's volume, and then reflect it in the horizontal bar.... It is just some training, so I am not allowed to use any plugin, <code>&lt;progress&gt;</code> or input type range.</p>
  
  <p>I have added <code>width:10%</code> to <code>#myVolume</code>, just to make sure it is there. </p>
  
  <p>Then... I don't know how can I pass the value of the volume (from 0 to 1) to somehow a percentage, because I guess the bar works as a percentage, right? </p>
  
  <p>I don't need anyone giving me the solution code....but some help about what should I think of...</p>
  
  <p>I have made this jsfiddle, although it is quite useless... :(</p>
  
  <p><a href="https://jsfiddle.net/zuL6umjo/1/" rel="nofollow noreferrer">https://jsfiddle.net/zuL6umjo/1/</a></p>