使用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 = ?".

任何非常感谢帮助。

来源

推荐答案

卷属性就像不透明度，介于0和1之间，一个是100％。

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

你的代码非常接近，你只需要划分<$设置< audio> 的音量时，c $ c>值按 100 element：

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);
    }
});

注意我还把更改事件处理程序在滑块小部件的初始化中。

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.

此外，您可以绑定到幻灯片事件，音量将当用户滑动滑块小部件时更改，而不是在他们完成移动句柄之后：

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&lt; audio&gt;体积的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！