Создание тома бар Javascript

Question

Мне нужно создать аудио-плеер, и я не могу видеть, как преобразовать его в JavaScript ....

Это то, что я до сих пор ...

HTML:

<audio id="music" src="http://www.sousound.com/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); 

Я знаю, что javascript ничего не делает. Это потому, что я не знаю, как действовать дальше. Поэтому я пытаюсь проверить значение громкости звука, а затем отразить его в горизонтальной полосе .... Это просто тренировка, поэтому мне не разрешено использовать какой-либо плагин, <progress> или диапазон входного типа ,

Я добавил ширину: 10% к #myVolume, просто чтобы убедиться, что он есть.

Тогда я не знаю, как передать значение объема (от 0 до 1) до какого-либо процента, потому что я думаю, что панель работает как процент, не так ли?

Я никому не нужен, давая мне код решения .... но некоторая помощь о том, что я должен думать ...

Я сделал это jsfiddle, хотя это совершенно бесполезно ...: (

https://jsfiddle.net/zuL6umjo/1/

Answer 1

Ваша почти там Вот обновлённая скрипка:.. https://jsfiddle.net/zuL6umjo/8/

Вот способ расширения/сжатия вашего объем бара на основе от объема от звукового элемента

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

updateVolume(); 

Answer 2

Чтобы создать панель, способную изменять громкость аудиоэлемента, это код, который поможет.

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.com/music/healing/healing_01.mp3" controls></audio> 
 
<div class="volume-slider-con"> 
 
<div class="volume-slider"></div> 
 
</div>