马黑黑 发表于 2022-2-16 18:16

JS：模拟audio音量控制

本帖最后由 马黑黑 于 2022-2-16 18:20 编辑 <br /><br />audio有一个可读写属性，obj.volume，用于基于audio自身的音量控制，其值从 0.0 到 1.0&nbsp;之间，0.0&nbsp;为静音，1.0&nbsp;为最大音量。此属性不影响计算机的音量控制，仅针对audio控件自身。<p></p><div><br></div><div>我们在新近发布的audio播放器里，用过&nbsp;div&nbsp;元素来模拟进度条，同样的，我们也可以使用div或任意其他可操控元素来模拟音量控制条，这里我们仍然使用&nbsp;div&nbsp;元素，令其 background-size&nbsp;值的变化来呈现音量及其对音量的控制。为便于观察，我们令原生的audio界面出现，但没有建立逆向感应，就是说通过音量模拟条控制的音量能体现在audio的音量控制滑竿上，反之则不能。</div><div><br></div><div>以下是代码和效果演示：</div><div><br></div><div><div>&lt;style type="text/css"&gt;</div><div><br></div><div>#auVol {</div><div><span style="white-space:pre">        </span>width:100px;</div><div><span style="white-space:pre">        </span>height:10px;</div><div><span style="white-space:pre">        </span>border:1px solid;</div><div><span style="white-space:pre">        </span>background:linear-gradient(90deg, green, green) no-repeat;</div><div><span style="white-space:pre">        </span>cursor:pointer;</div><div>}</div><div><br></div><div>&lt;/style&gt;</div><div>&lt;p&gt;&lt;audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/02/16/31f3a3b330cbff91f59d05248cf41694.mp3" autoplay="autoplay" loop="loop" controls="controls"&gt;&lt;/audio&gt;&lt;br&gt;&lt;/p&gt;</div><div>&lt;div id="auVol"&gt;&lt;/div&gt;</div><div><br></div><div>&lt;script language="javascript"&gt;</div><div><br></div><div>var auVol = document.getElementById('auVol'); //音量模拟条标识</div><div>var aud = document.getElementById('aud'); //audio元素标识</div><div>var canDo = false; //拖动布尔标识</div><div><br></div><div>auVol.style.backgroundSize = aud.volume *100 + "%"; //音量条初始状态</div><div><br></div><div>auVol.onmousemove = function(){ //音量控制</div><div><span style="white-space:pre">        </span>if(canDo) { // 如果鼠标已经按下</div><div><span style="white-space:pre">                </span>let w = offset(auVol,"left");</div><div><span style="white-space:pre">                </span>let x = (event.clientX - w) * 100 / this.clientWidth;</div><div><span style="white-space:pre">                </span>this.style.backgroundSize = x + "%";</div><div><span style="white-space:pre">                </span>//console.log(x);</div><div><span style="white-space:pre">                </span>aud.volume = x / 100;</div><div><span style="white-space:pre">        </span>}</div><div>}</div><div>//几个鼠标动作事件：控制 canDu 布尔值</div><div>auVol.onmousedown = function(){ canDo = true; }</div><div>auVol.onmouseout = function(){ canDo = false; }</div><div>auVol.onmouseup = function(){ canDo = false; }</div><div><br></div><div>function offset(obj,direction){//位移总量</div><div><span style="white-space:pre">        </span>let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);</div><div><span style="white-space:pre">        </span>let realNum = obj;</div><div><span style="white-space:pre">        </span>let positionParent = obj.offsetParent;</div><div><span style="white-space:pre">        </span>while(positionParent != null){</div><div><span style="white-space:pre">                </span>realNum += positionParent;</div><div><span style="white-space:pre">                </span>positionParent = positionParent.offsetParent;</div><div><span style="white-space:pre">        </span>}</div><div><span style="white-space:pre">        </span>return realNum;</div><div>}</div><div><br></div><div>&lt;/script&gt;</div></div><div><br></div><div><br></div>
<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>&nbsp;&nbsp;<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 + "%";
                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.toUpperCase()+direction.substring(1);
        let realNum = obj;
        let positionParent = obj.offsetParent;
        while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
        }
        return realNum;
}

</script>

马黑黑 发表于 2022-2-16 18:21

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

红影 发表于 2022-2-16 18:55

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

红影 发表于 2022-2-16 19:00

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

马黑黑 发表于 2022-2-16 19:29

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

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

马黑黑 发表于 2022-2-16 19:32

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

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

马黑黑 发表于 2022-2-16 19:37

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

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

红影 发表于 2022-2-16 21:13

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

是属于内部命令吧。

红影 发表于 2022-2-16 21:15

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

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

红影 发表于 2022-2-16 21:17

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

这么多应用，真不容易。

马黑黑 发表于 2022-2-16 21:32

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

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

马黑黑 发表于 2022-2-16 21:33

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

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

马黑黑 发表于 2022-2-16 21:33

红影 发表于 2022-2-16 21:13
是属于内部命令吧。
不是内部，是audio自己的，严格来说，是控件属性

红影 发表于 2022-2-17 10:49

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

很多人的知识都不全面呢{:4_173:}

红影 发表于 2022-2-17 10:51

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

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

红影 发表于 2022-2-17 10:52

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

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

马黑黑 发表于 2022-2-18 11:59

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

有不少的，查文档能知道

红影 发表于 2022-2-18 12:47

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

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

马黑黑 发表于 2022-2-19 20:27

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

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

红影 发表于 2022-2-19 20:32

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

这个，我还从来没去想过，就只在这里跟着你学了些{:4_173:}
页: [1] 2
查看完整版本: JS：模拟audio音量控制