js控制audio音量
//音量控制
var volumn = {
value: 0, //当前音量，表示百分比，0~100
titleDom: document.querySelector(".title"), //显示音量数字的dom
barDom: document.querySelector(".bar"), //显示蓝红色条的div
audioDom: document.querySelector("audio"), //audio元素
show: function () {
this.titleDom.innerText = this.value; //音量值
this.barDom.style.width = this.value + "%";
this.audioDom.volume = this.value / 100;
},
increase: function (val) { //增加指定的音量
this.value += val;
if(this.value >= 100){
this.value = 100 //最大音量
}
if(this.value <= 0){
this.value = 0; //最小音量
}
this.show(); //渲染dom
},
clear: function () { //清零
this.value = 0;
this.show();
}
}
//箭头
var pointer = {
left: 0, //记录当前的marginLeft的值
pointerDom: document.querySelector(".pointer"),
maxLeft: 300, //最大移动值
startMove: function () { //开始自动左右跑
var that = this;
var step = 2; //每次移动的值
setInterval(function () {
that.left += step;
if(that.left >= that.maxLeft){
that.left = that.maxLeft; //最大移动范围
step = -step
}
if(that.left <= 0){
that.left = 0; //最小移动范围
step = -step;
}
that.pointerDom.style.marginLeft = that.left + "px"; //渲染dom
}, 16)
},
isCenter: function () {
var centerWidth = 30;
var minLeft = this.maxLeft / 2 - centerWidth / 2; //中间位置的左边
var maxLeft = this.maxLeft / 2 + centerWidth / 2; //中间位置的右边
return this.left >= minLeft && this.left <= maxLeft;
}
}
volumn.show();
pointer.startMove(); //开始自动移动
// 调用事件
window.onkeydown = function (e) {
if (e.key === " ") {
//按下的是空格
if (pointer.isCenter()) {
//箭头刚好在中间
volumn.increase(5);
}
else {
if(volumn.value >= 50){
volumn.increase(-5);
}else{
volumn.clear();
}
}
}
}
// (".jia").onclick = function () {
// (5);
// ();
// }
// (".jian").onclick = function () {
// (-5);
// ();
// }