は、私は、オーディオプレーヤーを作成する必要がjavascriptの

Question

ボリュームバーを作成し、私はジャバスクリプトに変換する方法を見ることができない

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/

があなたのボリュームバーはオーディオ要素からボリュームのオフに基づいて縮小/拡大するための方法です

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>