好的,我想使用 jQuery Slider 元素来控制 HTML5 元素的音量。我已经实现了幻灯片,但不知道如何使滑块的值代替“audio player.volume =?”。
任何帮助深表感谢。
好的,我想使用 jQuery Slider 元素来控制 HTML5 元素的音量。我已经实现了幻灯片,但不知道如何使滑块的值代替“audio player.volume =?”。
任何帮助深表感谢。
该volume
属性就像不透明度,它介于零和一之间,一是 100%。
您的代码是如此接近,您只需要在设置元素的音量时value
除以:100
<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
。
当我在您的网页上将上述代码粘贴到控制台时,音量滑块按预期工作。
此外,您可以绑定到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:
<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>
在 jQuery 中,您可以通过简单地使用来获取 DOM 对象
$("audio")[0]
所以一个例子是:
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;
});
});
这也可以通过一个简单的输入范围元素来实现,而无需使用 jQuery-UI。
<input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="0.3" />
let audioStream = new Audio('https://mofosounds.com:8000/;');
$("#volumeSlider").change(function(){
let volume = $(this).val();
audioStream.volume = volume ;
});