使用js 如何控制音频音量的大小？

这里主要介绍了原生js css调节音量滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了js调节音量滑块的具体代码，供大家参考，具体内容如下。

html部分

body>
    
    div class="all">
    
        p>
    当前位置0%/p>
    
        div class="bar">
    
            div class="box">
    /div>
    
        /div>
    
    /div>
    
/body>
    

css部分

style>

    .all {
    
        width: 500px;
    
        height: 80px;
    
        margin: 100px auto;
    
        position: relative;

    }


    .bar {
    
        width: 500px;
    
        height: 20px;
    
        border-radius: 10px;
    
        background: #aaa;
    
        position: absolute;
    
        top: 0;
    
        bottom: 0;
    
        left: 0;
    
        right: 0;
    
        margin: auto;
    
        cursor: pointer;

    }


    .box {
    
        width: 30px;
    
        height: 30px;
    
        background: #000;
    
        position: absolute;
    
        bottom: 0;
    
        top: 0;
    
        margin: auto 0;
    
        border-radius: 50%;
    
        cursor: pointer;
    
        transition: left 0.1s linear 0s;

    }
    
/style>
    

js逻辑

script>

    var box = document.getElementsByClassName(´box´)[0]
    var bar = document.getElementsByClassName(´bar´)[0]
    var all = document.getElementsByClassName(´all´)[0]
    var p = document.getElementsByTagName(´p´)[0]
    var cha = bar.offsetWidth - box.offsetWidth
    box.onmousedown = function (ev) {

        let boxL = box.offsetLeft
        let e = ev || window.event //兼容性
        let mouseX = e.clientX //鼠标按下的位置
        window.onmousemove = function (ev) {

            let e = ev || window.event
            let moveL = e.clientX - mouseX //鼠标移动的距离
            let newL = boxL   moveL //left值
            // 判断最大值和最小值
            if (newL  0) {

                newL = 0
            }
    
            if (newL >
= cha) {

                newL = cha
            }

            // 改变left值
            box.style.left = newL   ´px´
            // 计算比例
            let bili = newL / cha * 100
            p.innerHTML = ´当前位置´   Math.ceil(bili)   ´%´
            return false //取消默认事件
        }

        window.onmouseup = function () {

            window.onmousemove = false //解绑移动事件
            return false
        }

        return false
    }
    ;

    // 点击音量条
    bar.onclick = function (ev) {

        let left = ev.clientX - all.offsetLeft - box.offsetWidth / 2
        if (left  0) {

            left = 0
        }
    
        if (left >
= cha) {

            left = cha
        }

        box.style.left = left   ´px´
        let bili = left / cha * 100
        p.innerHTML = ´当前位置´   Math.ceil(bili)   ´%´
        console.log(left)
        return false
    }
    
/script>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！