jQueryを使用してHTML5を制御する<audio>ボリューム

Question

いいえ、jQuery Slider要素を使用してHTML5要素の音量を制御したいとします。私はスライドを実装しましたが、スライダーの値を "audio player.volume =？"の代わりにする方法を理解することはできません。

ご迷惑をおかけして申し訳ありません。

Source

Answer 1

volume性が不透明に似て、それは1つが100％で、0と1の間で移行します。私もsliderウィジェットの初期化の内側changeイベントハンドラを置く

$("#slider").slider({ 
    value : 75, 
    step : 1, 
    range : 'min', 
    min : 0, 
    max : 100, 
    change : function(){ 
     var value = $("#slider").slider("value"); 
     document.getElementById("audio-player").volume = (value/100); 
    } 
}); 

お知らせ：

あなたのコードは<audio>要素のボリュームを設定するときにあなただけの100でvalueを分割する必要があり、とても近いです。

あなたのウェブページ上に上記のコードをコンソールに貼り付けると、音量スライダが期待どおりに機能します。

また、彼らはハンドルを移動し終えた直後ではなく、あなたがslideイベントに結合することができ、ユーザーがsliderウィジェットをスライドして音量が変化します：

$("#slider").slider({ 
    value : 75, 
    step : 1, 
    range : 'min', 
    min : 0, 
    max : 100, 
    slide : function(){ 
     var value = $("#slider").slider("value"); 
     document.getElementById("audio-player").volume = (value/100); 
    } 
}); 

Answer 2

ここで注意してください（quick jsFiddle exampleです。オーディオはページの読み込み時に開始されます）。

のjQuery：

$('#audioSlider').slider({ 
    orientation: "vertical", 
    value: audio1.volume, 
    min: 0, 
    max: 1, 
    range: 'min', 
    animate: true, 
    step: .1, 
    slide: function(e, ui) { 
     audio1.volume = ui.value; 
    } 
});​ 

HTML：あなたは、単に

$("audio")[0] 

を使用してDOMオブジェクトを取得することができますjQueryので

<div id="audioSlider"></div> 

<audio id="audio1" autoplay> 
    <source src="http://www.w3schools.com/html5/song.ogg" type="audio/ogg" /> 
    <source src="http://www.w3schools.com/html5/song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element. 
</audio>​ 

Answer 3

ですから、例えば次のようになります。
HTML

<div class="audio-clip"> 
    <h4>Clip 1</h4> 
    <input type="button" class="play-button">Play</button> 
    <input type="range" min="0" max="1" step="0.1"/> 
    <audio src="http://www.w3schools.com/html5/song.mp3"></audio> 
</div> 
<div class="audio-clip"> 
    <h4>Clip 2</h4> 
    <input type="button" class="play-button">Play</button> 
    <input type="range" min="0" max="1" step="0.1"/> 
    <audio src="http://www.w3schools.com/html5/song.mp3"></audio> 
</div> 

jQueryの見事

$(document).ready(function() { 
    $(".play-button").click(function(){ 
     $(this).parent("div").find("audio").trigger('play');  
    }); 

    $(".audio-clip input[type='range']").on("input", function(){ 
     $(this).parent("div").find("audio")[0].volume = this.value; 
    }); 
});