使用jQuery控制HTML5 <audio>体积 [英] Using jQuery to control HTML5 <audio> volume

问题描述

好的，我想使用 jQuery Slider 元素控制 HTML5 元素的音量.我已经实现了幻灯片，但不知道如何让滑块的值代替audio player.volume = ?".

Okay, I want to control the volume of an HTML5 element using the jQuery Slider element. I have implemented the slide, but can't figure out how to make the value of the slider take the place of the "audio player.volume = ?".

非常感谢任何帮助.

来源

推荐答案

volume 属性就像不透明度，它介于 0 和 1 之间，1 是 100%.

The volume property is like opacity, it goes between zero and one, one being 100%.

你的代码太接近了，你只需要在设置元素的音量时将value除以100即可:

Your code is so close, you just need to divide value by 100 when setting the volume of the <audio> element:

$("#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 小部件的初始化中.

Notice I also put the change event handler inside the initialization of the slider widget.

当我在您的网页上将上述代码粘贴到控制台时，音量滑块按预期工作.

When I paste the above code along into the console while on your webpage, and the volume slider worked as expected.

此外，您可以绑定到 slide 事件，音量会随着用户滑动 slider 小部件而改变，而不仅仅是在他们完成移动手柄之后:

Also, you can bind to the slide event and the volume will change as the user slides the slider widget, not just after they finish moving the handle:

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

这篇关于使用jQuery控制HTML5 <audio>体积的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！