我需要创建一个音频播放器,我无法看到如何将其转换为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,虽然它很无用...... :(
答案 0 :(得分:2)
要创建一个能够改变音频元素音量的条,这是一个有用的代码。
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
&#13;
widget.setVisible(false);
&#13;
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;
};
&#13;
答案 1 :(得分:0)
你几乎就在那里。这是一个更新的小提琴:https://jsfiddle.net/zuL6umjo/8/
这是一种根据音频元素的音量扩展/缩小音量条的方法。
function updateVolume () {
myVolumeBar.style.width = audioVolume * 100 + '%';
}
updateVolume();