JS：模拟audio音量控制

马黑黑

audio有一个可读写属性，obj.volume，用于基于audio自身的音量控制，其值从 0.0 到 1.0 之间，0.0 为静音，1.0 为最大音量。此属性不影响计算机的音量控制，仅针对audio控件自身。

我们在新近发布的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>

  

马黑黑

操纵模拟音量控制条的方法：按下鼠标左键（其实右键也行），然后左右拖动，松开左键

红影

哇哦，终于到了音量控制的环节了。前面听黑黑提到，就在期待了

红影

还是有点复杂的。“obj.volume，用于基于audio自身的音量控制，其值从 0.0 到 1.0 之间”
认识了这个功能

马黑黑

红影 发表于 2022-2-16 19:00
还是有点复杂的。“obj.volume，用于基于audio自身的音量控制，其值从 0.0 到 1.0 之间”
认识了这个功能{ ...

嗯，它根据 audio 元素而又，obj 必须是基于 audio 的元素id标识

马黑黑

红影 发表于 2022-2-16 18:55
哇哦，终于到了音量控制的环节了。前面听黑黑提到，就在期待了

不过我自己还是不想将这个功能用于前面发布的播放器，我感觉不出它的必要性。但为了表示我在audio方面没有短板，总要弄一下

马黑黑

红影 发表于 2022-2-16 19:00
还是有点复杂的。“obj.volume，用于基于audio自身的音量控制，其值从 0.0 到 1.0 之间”
认识了这个功能{ ...

感觉吧，复杂首先在于一些运算，需要数学基础，相当于列方程解应用题吧；二是一系列的鼠标事件，经过，按下，离开，弹起（松开），它们指挥一个布尔变量的真和假，真的时候，鼠标的经过（onmouseover）事件才可以去控制音量；三是元素位移量的获取，但这个在前面的播放器里用到了，这里是代码重用。

红影

马黑黑 发表于 2022-2-16 19:29
嗯，它根据 audio 元素而又，obj 必须是基于 audio 的元素id标识

是属于内部命令吧。

红影

马黑黑 发表于 2022-2-16 19:32
不过我自己还是不想将这个功能用于前面发布的播放器，我感觉不出它的必要性。但为了表示我在audio方面没 ...

是啊，电脑本身是可以调节音量的。

红影

马黑黑 发表于 2022-2-16 19:37
感觉吧，复杂首先在于一些运算，需要数学基础，相当于列方程解应用题吧；二是一系列的鼠标事件，经过，按 ...

这么多应用，真不容易。

马黑黑

红影 发表于 2022-2-16 21:17
这么多应用，真不容易。

知识全面的，应该不是问题

马黑黑

红影 发表于 2022-2-16 21:15
是啊，电脑本身是可以调节音量的。

Audi的和电脑的调节，是两码事，不完全一样

马黑黑

红影 发表于 2022-2-16 21:13
是属于内部命令吧。

不是内部，是audio自己的，严格来说，是控件属性

红影

马黑黑 发表于 2022-2-16 21:32
知识全面的，应该不是问题

很多人的知识都不全面呢

红影

马黑黑 发表于 2022-2-16 21:33
Audi的和电脑的调节，是两码事，不完全一样

嗯，我是说有电脑音量调节可用，没必要在去调节播放器，设定功能好麻烦的

红影

马黑黑 发表于 2022-2-16 21:33
不是内部，是audio自己的，严格来说，是控件属性

我区分不出来。audio有好多自己的命令呢。

马黑黑

红影 发表于 2022-2-17 10:52
我区分不出来。audio有好多自己的命令呢。

有不少的，查文档能知道

红影

马黑黑 发表于 2022-2-18 11:59
有不少的，查文档能知道

哦，要查什么文档啊，在哪查？

马黑黑

红影 发表于 2022-2-18 12:47
哦，要查什么文档啊，在哪查？

一般来说，要学什么，就需要准备它的文档

红影

马黑黑 发表于 2022-2-19 20:27
一般来说，要学什么，就需要准备它的文档

这个，我还从来没去想过，就只在这里跟着你学了些