JS 基础篇(音量调节器）

js文件

var objFun = {
    bindEvent(boxID){
        this.wrapperDom = document.getElementById(boxID);
        this.audio = this.wrapperDom.querySelector('audio');
        this.moon = this.wrapperDom.querySelector('.moon');
        this.sun = this.wrapperDom.querySelector('.sun');
        this.perinfo = this.wrapperDom.querySelector('.per');
        var flag = false;
        var dis;

         //鼠标拖拽事件 
         this.moon.onmousedown = function (e) {
            flag = true;
            // 计算出鼠标落下点与月亮边界的距离
            dis = e.clientX - this.moon.offsetLeft;
        }.bind(this);

        this.wrapperDom.onmousemove = function (e) {
            if (!flag) {
                return;
            };
            // 根据拖拽距离设置当前拖拽元素的位置
            this.moon.style.left = (e.clientX - dis) + 'px';
            // 调用控制音量的函数
            this.getVoice();
        }.bind(this);
        // 鼠标抬起 结束拖拽事件
        this.wrapperDom.onmouseup = function () {
            flag = false;
        }
    },
    getVoice(){
          //太阳的宽度
            var sunW = this.sun.clientWidth;
              sunWL = this.sun.offsetLeft,
              moonWL = this.moon.offsetLeft;    
              //月亮与太阳之间的距离
              var distance = Math.abs(sunWL-moonWL)/sunW;
            //   0 - 1 
              this.changeVoice(distance);

    },
    changeVoice(vol){
        if(vol>=1){
            this.audio.pause()
            return;
        }
         this.audio.play();
         // 根据百分比设置音量
         this.audio.volume = 1-vol;
        // 填充html内容
         
        var str = "Volume: " + (1-vol);
        this.perinfo.innerHTML = str;
        // 设置背景颜色值
       
        this.moon.style.background = `rgba(${vol}34,12,67,1)`
        this.wrapperDom.style.background=`rgba(${vol},53,15,1)`;
    }
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日食音量调节</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="wrapper" id="wrapperDom">
        <audio id="audio" src="./source/holee.mp3" preload="auto"></audio>
        <div class="title">拖动地球远近来控制音乐播放~调节声音大小~</div>
        <div class="per"></div>
        <div class="circle sun"></div>
        <div class="circle moon"></div>
    </div>
    <script src="mosic.js"></script>
    <script>
    
    objFun.bindEvent('wrapperDom');
    </script>
</body>

</html>

福建小徐

发布了188 篇原创文章 · 获赞 154 · 访问量 1万+

私信关注

JS 基础篇(音量调节器）

js文件

html

猜你喜欢