Creating a volume bar javascript
<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>