Javascript 使用jQuery控制HTML5<；音频>；体积

好的，我想使用jqueryslider元素控制HTML5元素的音量。我已经实现了这个幻灯片，但不知道如何让滑块的值代替“audioplayer.volume=？”

非常感谢您的帮助

---

体积属性类似于不透明度，介于0和1之间，1表示100%

您的代码非常接近，在设置

元素的音量时，只需将

值

除以

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

事件处理程序放在

滑块

小部件的初始化中

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

此外，您还可以绑定到

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

这里有一个（注意：音频从页面加载开始）

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中，只需使用

$("audio")[0]

例如：
html

---

这也可以通过一个简单的输入范围元素实现，而无需使用jqueryui

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

让audioStream=新音频流https://mofosounds.com:8000/;');
$（“#volumeSlider”）.change（函数（）{
让volume=$（this.val（）；
audioStream.volume=音量；
});

非常有效。但是，如果您随机单击该条，很明显，滑块会移动，音量也会调整，但是如果您下降几次，音量会下降，但是如果您再上升一次，音量会再次下降，然后再上升。但滑块工作正常。编辑：通过在初始化中添加幻灯片和更改来修复此问题@贾斯珀对我来说太棒了！将其与用于滑块的自定义jQuery UI主题一起使用，就像这样，我有一个用于在后台播放MP3的自定义音量滑块。

 <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>

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

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