我们在新近发布的audio播放器里,用过 div 元素来模拟进度条,同样的,我们也可以使用div或任意其他可操控元素来模拟音量控制条,这里我们仍然使用 div 元素,令其 background-size 值的变化来呈现音量及其对音量的控制。为便于观察,我们令原生的audio界面出现,但没有建立逆向感应,就是说通过音量模拟条控制的音量能体现在audio的音量控制滑竿上,反之则不能。
<style type="text/css">
#auVol {
width:100px;
height:10px;
border:1px solid;
background:linear-gradient(90deg, green, green) no-repeat;
cursor:pointer;
}
</style>
<p><audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/02/16/31f3a3b330cbff91f59d05248cf41694.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio><br></p>
<div id="auVol"></div>
<script language="javascript">
var auVol = document.getElementById('auVol'); //音量模拟条标识
var aud = document.getElementById('aud'); //audio元素标识
var canDo = false; //拖动布尔标识
auVol.style.backgroundSize = aud.volume *100 + "%"; //音量条初始状态
auVol.onmousemove = function(){ //音量控制
if(canDo) { // 如果鼠标已经按下
let w = offset(auVol,"left");
let x = (event.clientX - w) * 100 / this.clientWidth;
this.style.backgroundSize = x + "%";
//console.log(x);
aud.volume = x / 100;
}
}
//几个鼠标动作事件:控制 canDu 布尔值
auVol.onmousedown = function(){ canDo = true; }
auVol.onmouseout = function(){ canDo = false; }
auVol.onmouseup = function(){ canDo = false; }
function offset(obj,direction){//位移总量
let offsetDir = "offset" + direction[0].toUpperCase()+direction.substring(1);
let realNum = obj[offsetDir];
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent[offsetDir];
positionParent = positionParent.offsetParent;
}
return realNum;
}
</script>