Wie man eine Spur mit einem Lautstärkeregler steuert?

Question

Ich bin mit diesen Lautstärkeregler:

// 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>

Wie verknüpfe Sie es auf eine Spur? Ich bin mir nicht sicher, wo die Variable platziert werden soll (oder was sonst noch bearbeitet werden muss)

Answer 1

Es gibt keine HTML-Eigenschaft, die mit einem Sound verknüpft werden kann. Sie müssen den Wert beim Ziehen programmgesteuert extrahieren und auf Ihren Sound anwenden.

Der Sound hängt auch von Implementierungen ab. Der Standard HTML5 Audio-Element hat eine volume Eigenschaft:

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