使用 jQuery 控制 HTML5 <audio> 音量

IT技术 javascript jquery user-interface jquery-ui-slider
2021-02-19 20:54:13

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

任何帮助深表感谢。

来源

4个回答

volume属性就像不透明度,介于 0 和 1 之间,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);
    }
});
作品,精彩纷呈。但是,如果您随意单击该栏,显然滑块会移动并且音量会调整,但是如果您向下几次,则音量会降低,但是如果您再向上一次,它会再次降低,然后返回向上。不过滑块工作正常。编辑:通过在初始化中添加幻灯片和更改来修复此问题。@碧玉
2021-05-04 20:54:13
对我很有用!将此与滑块的自定义 jQuery UI 主题一起使用,就像我有一个自定义音量滑块用于在后台播放的 MP3。
2021-05-15 20:54:13

这是一个快速的 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 ;
});