css+js调整当前界面背景音量

展示效果

 

html代码：

    <div>
        <audio id="audio" controls  src="https://dbl.5518pay.com/res/raw-assets/resources/audio/common/btnClick.7e5e8.mp3">
            <audio id="xqt" src="https://dbl.5518pay.com/res/raw-assets/resources/audio/common/btnClick.7e5e8.mp3"></audio>
        </audio>
        <div id="test">
            <input type="range" value="1">
        </div>
    </div>

滑动条css样式

input[type=range] {
  -webkit-appearance: none;
  width: 300px;
  border-radius: 10px;
  /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 15px;
  border-radius: 10px;
  /*将轨道设为圆角的*/
  box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
  /*轨道内置阴影效果*/
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 25px;
  width: 25px;
  margin-top: -5px;
  /*使滑块超出轨道部分的偏移量相等*/
  background: #ffffff;
  border-radius: 50%;
  /*外观设置为圆形*/
  border: solid 0.125em rgba(205, 224, 230, 0.5);
  /*设置边框*/
  box-shadow: 0 .125em .125em #3b4547;
  /*添加底部阴影*/
}

滑动条js效果

    // 滑动条修饰
    $.fn.RangeSlider = function(cfg){
    this.sliderCfg = {
        min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
        max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
        step: cfg && Number(cfg.step) ? cfg.step : 1,
        callback: cfg && cfg.callback ? cfg.callback : null
    };

    var $input = $(this);
    var min = this.sliderCfg.min;
    var max = this.sliderCfg.max;
    var step = this.sliderCfg.step;
    var callback = this.sliderCfg.callback;

    $input.attr('min', min)
        .attr('max', max)
        .attr('step', step);

    $input.bind("input", function(e){
        $input.attr('value', this.value);
        $input.css( 'background', 'linear-gradient(to right, #059CFA, white ' + this.value*100 + '%, white)' );

        if ($.isFunction(callback)) {
            callback(this);
        }
    });
};

音频滑动播放声音js

    $(function(){
        /* 触发修改声音 */
        let vol = $('#audio')[0].volume;
        $('#audio').on('canplay',function(){
            this.play()
        });
        var timeout = null;
        var change = function($input) {
                timeout!=null?clearTimeout(timeout):'';
                timeout = setTimeout(function(){
                    dosomething()
                },500)
                /*内容可自行定义*/
                console.log($($input).val());
                $('#audio')[0].volume = $($input).val();
            }
        $('#test input').css( 'background', 'linear-gradient(to right, #059CFA, white ' + 100 + '%, white)' );
        $('input').RangeSlider({ min: 0,   max: 1,  step: 0.01,  callback: change});
        /* 防止声音播放连续触发 */
        function dosomething(){
            var player = document.getElementById('xqt');
            player.play();
        }
    })