亚伦影音工作室 发表于 2025-2-9 22:27

音量设置

本帖最后由 亚伦影音工作室 于 2025-2-10 12:07 编辑 <br /><br /><style>
#caocao {
      position:relative;
      width: 35px;
      height: 35px;
      bottom: 8px;
   left: 0%;
      cursor: pointer;
    }


#auVol {position: relative;bottom: 30px;z-index: 1;
        width:300px; left: 6%;
margin: 0px 0;
        height:5px;
        border:1px solid;
        background:#eee linear-gradient(90deg, #000, #000) no-repeat;
        cursor:pointer;
border-radius: 20px;
}

</style>
<audio id="aud" controlsautoplay src="https://img4.oldkids.cn/upload/2025/01/25/blog_260855907_20250125143403551.mp3" ></audio>
    <br>
   
<img src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png"id="caocao" onClick="pic()"/>
<div id="auVol"></div>



    <script>
      var aud= document.getElementById("aud");

      function muteAudio() {
            aud.muted= true;
      }

      function unmuteAudio() {
            aud.muted= false;
      }

   
               

function pic() {
var img = document.getElementById("caocao");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png") {
img.src = "https://pic1.imgdb.cn/item/67a8b6afd0e0a243d4fd95f3.png";muteAudio();auVol.style.backgroundSize = aud.volume *0 + "%";
} else {
img.src = "https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png";unmuteAudio();auVol.style.backgroundSize = aud.volume *80 + "%";
}
}

var auVol = document.getElementById('auVol'); //音量模拟条标识
var aud = document.getElementById('aud'); //audio元素标识

var canDo = false; //拖动布尔标识
auVol.style.backgroundSize = aud.volume *80 + "%"; //音量条初始状态
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;
aud.vouume = 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>

红影 发表于 2025-2-9 22:53

这个音量控制能调整音量大小，也能调节暂停呢，真好{:4_199:}

樵歌 发表于 2025-2-10 11:12

真棒！

小辣椒 发表于 2025-2-13 16:58

亚纶这个音量设置做的挺好的{:4_178:}
页: [1]
查看完整版本: 音量设置