ボリュームスライダーを使ってトラックをコントロールする方法は？

Question

私はこのボリュームスライダーを使用しています：

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

あなたがトラックにリンクするにはどうすればよいですか？変数を配置する場所（または他の編集を行う必要があるかどうかわからない）

Answer 1

サウンドにリンクするhtmlプロパティはありません。あなたは、プログラムでドラッグの値を抽出し、それをサウンドに適用する必要があります。

サウンドは実装によっても異なります。デフォルトのHTML5オーディオ要素は、volumeプロパティを持っています。

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