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=".mp3" 
       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, <progress> 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...

I have made this jsfiddle, although it is quite useless... :(

/

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="http://www.sousound./music/healing/healing_01.mp3" 
       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, <progress> 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...

I have made this jsfiddle, although it is quite useless... :(

https://jsfiddle/zuL6umjo/1/

• javascript
• progress
• audio-player

2 Answers 2

To create a bar capable of changing the volume of a audio element here is a code that will help.

var e = document.querySelector('.volume-slider-con');
var eInner = document.querySelector('.volume-slider');
var audio = document.querySelector('audio');
var drag = false;
e.addEventListener('mousedown',function(ev){
   drag = true;
   updateBar(ev.clientX);
});
document.addEventListener('mousemove',function(ev){
   if(drag){
      updateBar(ev.clientX);
   }
});
document.addEventListener('mouseup',function(ev){
 drag = false;
});
var updateBar = function (x, vol) {
   var volume = e;
        var percentage;
        //if only volume have specificed
        //then direct update volume
        if (vol) {
            percentage = vol * 100;
        } else {
            var position = x - volume.offsetLeft;
            percentage = 100 * position / volume.clientWidth;
        }

        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }

        //update volume bar and video volume
        eInner.style.width = percentage +'%';
        audio.volume = percentage / 100;
};

.volume-slider-con{
  height:10px;
  width:50%;
     position:relative;
  background-color:#ddd;
}
.volume-slider{
   height:100%;
   width:100%;
   position:relative;
   background-color:red;
}

<audio src="http://www.sousound./music/healing/healing_01.mp3" controls></audio>
<div class="volume-slider-con">
<div class="volume-slider"></div>
</div>

Your almost there. Here's an updated fiddle: https://jsfiddle/zuL6umjo/8/

Here is a way to expand/shrink your volume bar based off of the volume from the audio element.

function updateVolume () {
    myVolumeBar.style.width = audioVolume * 100 + '%';
}

updateVolume();