使用 jQuery 控制 HTML5<audio> 体积

Question

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

任何帮助深表感谢。

来源

Answer 1

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

您的代码非常接近，您只需在设置<audio>元素的音量时将value除以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事件处理程序放在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);
    }
});

Answer 2

这是一个快速的 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>​

Answer 3

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

Answer 4

这也可以通过一个简单的输入范围元素来实现，而无需使用 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 ;
});