Creating a volume bar javascript

[bigstorage]

I need to create an audio player, and I can't see how to convert it to javascript....
This is what I have so far...
HTML:

 <audio id="music" src="#" data-title="Title of the audio" data-author="Author's name"></audio>
    <span class="volumeScaleHolder">
      <span id="progressBar">
          <span id="myVolume"></span>
      </span>     </span>

CSS:
#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;
}JAVASCRIPT:
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);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, or input type range.
I have added width:10% to #myVolume, just to make sure it is there.
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?
I don't need anyone giving me the solution code....but some help about what should I think of...
Thank you!!
I have made this jsfiddle, although it is quiet useless...
jsfiddle.net/zuL6umjo/1/