如何使用音量滑块控制音轨？

Posted 2021-04-12

我正在使用此音量滑块：

// html/CSS/JS Volume slider inspired by the Vimeo player

$(document).ready(function () {
    var $input = $('#sliderInput'),
        steps = $input.attr('data-steps');
    defValue = $input.attr('value'),
    $slider = $("<div class='vslider'><div class='vslider_bar'></div><ul class='vslider_sticks'></div>").appendTo($input.parent());
    $input.hide();

    for (var i = 0; i < steps; i++) {
        var $stick = $('<li><div class="vslider_stick"a></div></li>').appendTo($slider.find('.vslider_sticks'));
        $stick.on('mouseenter', function () {
            $(this).addClass('active');
        }).on('mouseleave', function () {
            $(this).removeClass('active');
        });
    }

    var startDrag = function (event) {
        renderUI(getPercent(event));
        $(document.body).on('mousemove', onDrag);
        $(document.body).on('mouseup', stopDrag);
    },
    stopDrag = function (event) {
        $(document.body).off('mouseup', stopDrag);
        $(document.body).off('mousemove', onDrag);
    },
    onDrag = function (event) {
        renderUI(getPercent(event));
    };

    renderUI = function (percent) {
        var index = Math.round(percent * steps);
        index = index < steps ? index : steps;

        $('.vslider_sticks > li').find('div').css('opacity', 0);

        for (var i = 0; i < index; i++) {
            $('.vslider_sticks > li:eq(' + i + ')').find('div').css('opacity', 1);
        }
    };
    renderUI(defValue);

    getPercent = function (event) {
        var percent = (event.pageX - $slider.offset().left) / $('.vslider_sticks').width();
        percent = percent >= 0 ? percent : 0;
        percent = percent <= 1 ? percent : 1;
        return percent;
    };

    $slider.on('mousedown', startDrag);
});

body {
    background: #eee;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -18px;
    margin-left: -23px;
}
.vslider {
    position: relative;
    display: inline-block;
    height: 36px;
}
.vslider * {
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
}
.vslider_sticks {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
}
.vslider_sticks > li {
    position: relative;
    text-indent: -99999px;
    width: 5px;
    margin-right: 3px;
    height: 90%;
    top: 10%;
    float: left;
    display: inline-block;
    background: rgba(0, 0, 0, 0.1);
  
    -webkit-transition: height 60ms ease-out, top 60ms ease-out;
    -moz-transition: height 60ms ease-out, top 60ms ease-out;
    -ms-transition: height 60ms ease-out, top 60ms ease-out;
    -o-transition: height 60ms ease-out, top 60ms ease-out;
    transition: height 60ms ease-out, top 60ms ease-out;
}
.vslider_sticks > li:last-child {
    margin-right: 0;
}
.vslider_sticks > li.active {
    height: 100%;
    top: 0;
}
.vslider_stick {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #d41700;
    opacity: 1;
  
    -webkit-transition: opacity 50ms ease-out;
    -moz-transition: opacity 50ms ease-out;
    -o-transition: opacity 50ms ease-out;
    -ms-transition: opacity 50ms ease-out;
    transition: opacity 50ms ease-out;
}

<div class="container">
    <input type="range" value="0.6" data-steps="8" id="sliderInput" />
</div>

你如何将它链接到轨道？我不确定将变量放在何处（或者需要进行其他编辑）

答案

没有html属性可以将它链接到声音。您必须以编程方式提取拖动值并将其应用于声音。

声音还取决于实现。默认的HTML5音频元素具有volume属性：

var audio = new Audio("AUDIO_SOURCE");
audio.volume = 0.2;