创建音量条 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>