JS 基础篇(音量调节器）

2020-01-21 10:05:59 阅读：722 来源： 互联网

标签：audio vol sun 调节器 moon wrapperDom 音量 var 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万+ 私信关注

标签：audio,vol,sun,调节器,moon,wrapperDom,音量,var,JS
来源： https://blog.csdn.net/weixin_41181778/article/details/104058863

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS 基础篇(音量调节器）

js文件

html