使用jQuery控制HTML5 卷
好的，我想使用jQuery Slider元素控制HTML5元素的音量。 我已经实现了幻灯片，但无法弄清楚如何使滑块的值取代“audio player.volume =？”。
任何帮助深表感谢。
资源
volume属性就像不透明度，介于0和1之间，一个是100％。
你的代码非常接近，你只需要在设置元素的音量时将value除以100 ：
$("#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小部件的初始化中。
当我在网页上将上述代码粘贴到控制台中时，音量滑块按预期工作。
此外，您可以绑定到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); } });
这是一个快速的jsFiddle示例 （注意：音频从页面加载开始）。
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：
在jQuery中，您只需使用即可获取DOM对象
$("audio")[0]
所以一个例子是：
HTML
Clip 1
Play Clip 2
Play
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; }); });