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();
        }
    })