JavaScript实现日食音量调节器（通过移动地球远近来调节音量大小）

深藏阁楼爱情的钟 2023-06-10 08:25 14阅读 0赞

# 日食音量调节器（通过移动地球远近来调节音量大小） #

看见下面这个图了么？是不是有一点小小的唯美！！  
我个人觉得还行啦哈哈！下面就让我们看这个是怎么实现的吧!  
![日食音量调节器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]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">
            <audio id="audio" src="./source/song_1.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="demo.js"></script>
        
        
    
    </body>
    
    </html>

css部分

*{
        margin:0;
        padding:0;
    }
    html,body{
        width:100%;
        height:100%;
        /* 饱和度  亮度 */
        background: hsl(194,66%,49%);
    }
    
    .wrapper{
        position: relative;
        width:70%;
        height:100%;
        margin:0 auto;
    }
    .title{
        position:absolute;
        top:100px;
        color:#fff;
        font-size:20px;
        font-weight:bolder;
    }
    
    .circle{
        position: absolute;
        width:20%;
        padding-top:20%;
        border-radius:50%;
        left:30%;
        top:30%;
    }
    .sun{
        background-color: #ffff77;
        box-shadow: 0 0 50px #ffff77;
    }
    
    .moon{
        /* background-color:red; */
        left:52%;
        cursor: pointer;
        box-shadow: inset 5px 5px 50px rgba(255,255,119,0.3);
    }
    .per{
        position: absolute;
        top:20%;
        width:100%;
        height:40px;
        text-align: center;
        color:#fff;
        font-weight:bold;
    }

JavaScript部分

var obj = {
        init: function () {
            this.moon = document.getElementsByClassName('moon')[0];
            this.sun = document.getElementsByClassName('sun')[0];
            this.bindEvent();
    
        },
        bindEvent: function () {
            var self = this;
            var moon = self.moon;
            var dis;
            var flag = false;
            var body = document.getElementsByTagName('body')[0];
            //鼠标拖拽事件 
            moon.onmousedown = function (e) {
                flag = true;
                // 计算出鼠标落下点与边界的距离
                dis = e.clientX - moon.offsetLeft;
            };
            body.onmousemove = function (e) {
                if (!flag) {
                    return;
                };
                // 根据拖拽距离设置当前拖拽元素的位置
                moon.style.left = (e.clientX - dis) + 'px';
                // 调用控制音量的函数
                self.getVoice();
            }
            // 鼠标抬起 结束拖拽事件
            body.onmouseup = function () {
                flag = false;
            }
        },
        // 根据位置计算百分比  确定声音
        getVoice: function () {
            var self = this;
            var sun = self.sun;
            var moon = self.moon;
            var per,
                d = moon.clientWidth,
                moonL = moon.offsetLeft,
                moonR = moonL + d,
                sunL = sun.offsetLeft,
                sunR = sunL + d;
            // 两个圆相离状态  没有重合的部分
            if (sunL > moonR || moonL > sunR) {
                per = 0;
                // moon在sun的右侧
            } else {
                if (sunL < moonL) {
                    // 从右向左运动 sunR - moonL 计算出覆盖的水平距离  moonl 越来越小计算值越来越大
                    per = (sunR - moonL) / d;
                    // 从左向右运动  越来越大的moonR - 不动的sunL  覆盖水平距离越来越大 最后结果越来越大
                } else if (moonR >= sunL) {
                    per = (moonR - sunL) / d;
                }
            }
            self.change(per);
        },
        change: function (vol) {
            var audio = document.getElementsByTagName('audio')[0];
            var per = document.getElementsByClassName('per')[0];
            var moon = this.moon;
            var body = document.getElementsByTagName('body')[0];
            // 根据两个圆得距离计算得百分比确定音频是否播放
            vol > 0 ? audio.play() : audio.pause();
           
            // 根据百分比设置音量
            audio.volume = vol;
            // 填充html内容
            var str = "Volume: " + (vol * 100).toPrecision(4) + "%";
            per.innerHTML = str;
            // 设置背景颜色值
            moon.style.background = "hsl(194, 56%, " + (1 - vol) * 60 + "%)";
            body.style.background = "hsl(" + (194 + Math.floor(166 * vol)) + ", 66%, " + (1 - vol) * 50 + "%)";
        }
    }
    obj.init();

哈哈好了，Bella已经尽力了，别问Bella是谁，是我啦！看完记得点个赞再走啦！  
还是要自己先写一遍啦！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: /images/20230531/b8aecf3c81d64518b2f64624ec7a6b74.png

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 Windows 音量调节问题：自定义音量调节控件

在编程中解决 Windows 上扩展音量变灰的问题问题描述：在 Windows 操作系统中，当我们尝试调节音量时，有时会遇到音量调节控件变灰不可用的情况。这使得用户无

梦里梦外;/ 2024年02月27日 04:54/ 0 赞/ 61 阅读

相关 JS案例：拖拽音量调节效果

用原生js做了一个拖拽调节音量效果是这样的：（拖动时音量随两个圆形交集面积增大而增大） ![20200222153956378.gif][] 源码：[https://g

向右看齐/ 2023年07月07日 08:55/ 0 赞/ 16 阅读

相关 JavaScript实现日食音量调节器（通过移动地球远近来调节音量大小）

日食音量调节器（通过移动地球远近来调节音量大小）看见下面这个图了么？是不是有一点小小的唯美！！我个人觉得还行啦哈哈！下面就让我们看这个是怎么实现的吧! ![日

深藏阁楼爱情的钟/ 2023年06月10日 08:25/ 0 赞/ 15 阅读

相关安卓手机连接AirPods2，手机音量调节到顶，AirPods音量小。打开或关闭蓝牙绝对音量功能

前期买了一个AirPods，连iPhone7 Plus不存在声音问题。新换了P30 Pro，连接过几次其他品牌蓝牙耳机，连接AirPods2之后音量不正常，AirPods2

╰半橙微兮°/ 2023年05月31日 07:59/ 0 赞/ 25 阅读

相关 python使用pycaw获取windows当前音量值以及调节音量、设置静音

文章目录 1. 按 2. 代码示例 1. 按首先需要安装`pycaw`模块，在cmd中执行： pip3 install pycaw 2

绝地灬酷狼/ 2023年02月20日 08:27/ 0 赞/ 22 阅读

相关 matlab 音量标准化,matlab 音量标准化

录制声音过程中需对声音电平进行量化处理最理想的量化是最大电平对应最高量化比特但实际却很难做到常有音轻问题利用 MATLAB很容易实现音量标准化即最大电平对应

系统管理员/ 2023年01月16日 09:36/ 0 赞/ 134 阅读

相关基于Alsa lib进行音量调节以及静音操作

include <stdio.h> include <stdlib.h> include <sys/ioctl.h> include <sys/

你的名字/ 2022年08月05日 00:51/ 0 赞/ 700 阅读

相关 android 音量键调节无效问题

android 音量键调节无效问题在写我们app的时候，app里面用到了科大讯飞的语音识别，在读语音的时候按了音量键，第一是音量键的进度条不显示；第二是音量调节无法控制，是

忘是亡心i/ 2022年05月23日 02:35/ 0 赞/ 840 阅读

相关 Android--左滑调节屏幕亮度，右滑调节音量大小

核心代码： @Override public boolean onTouchEvent(MotionEvent event) {

电玩女神/ 2022年01月27日 11:04/ 0 赞/ 437 阅读

相关如何在Apple Watch上调节音量

![6975732b13234467611539b1d4d6f660.png][] While we love how the Apple Watch parks usefu

梦里梦外;/ 2021年07月27日 01:50/ 0 赞/ 1488 阅读