创建一个音量栏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>或输入类型范围。

我已经将width:10%添加到#myVolume，只是为了确保它在那里。

然后......我不知道如何将音量值（从0调到1）以某种方式传递给百分比，因为我觉得该栏的百分比是正确的，对吧？

我不需要任何人给我解决方案代码....但有些帮助我应该怎么想...

我已经做了这个jsfiddle，虽然它很无用...... :(

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

Answer 1

要创建一个能够改变音频元素音量的条，这将是一个有用的代码。

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>

Answer 2

你快到了。这是一个更新的小提琴：https://jsfiddle.net/zuL6umjo/8/

这是一种根据音频元素的音量扩展/缩小音量条的方法。

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

updateVolume();