使用jQuery控制HTML5 <audio>體積

Question

好，我想控制使用jQuery滑塊元件的HTML5元件的體積。我已經實現了幻燈片，但無法弄清楚如何使滑塊的值代替「audio player.volume =？」。

任何幫助，非常感謝。

Source

Answer 1

volume的屬性是不透明度等，這是不言而喻零和一，一個之間爲100％。

你的代碼是如此接近，你只需要通過100劃分value設置<audio>元件的體積時：

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

通知我也把change事件處理程序slider widget的初始化內。

當我沿着粘貼上面的代碼到控制檯，同時在您的網頁，和音量滑塊發揮預期。

此外，您還可以綁定到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：

<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

在jQuery中，你可以通過簡單地使用

$("audio")[0] 

得到DOM對象，這樣的例子是：
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; 
    }); 
});