使用jQuery控制HTML5 <audio>卷

Question

好的,我想使用jQuery Slider元素控制HTML5元素的音量.我已经实现了幻灯片,但无法弄清楚如何使滑块的值取代"audio player.volume =？".

任何帮助深表感谢.

资源

Answer 1

该volume属性就像不透明度,介于0和1之间,其中一个是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);
    }
});