使用 jQuery 控制 HTML5 <audio> 音量答案

【问题标题】：Using jQuery to control HTML5 <audio> volume使用 jQuery 控制 HTML5 <audio> 音量
【发布时间】：2012-03-24 06:16:37
【问题描述】：

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

非常感谢任何帮助。

Source

【问题讨论】：

标签： javascript jquery user-interface jquery-ui-slider

【解决方案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);
    }
});

【讨论】：

工作，出色。但是，如果你随意点击条，很明显，滑块会移动，音量会调整，但是如果你向下几次，音量会下降，但如果你再上升一次，它会再次下降，然后返回向上。滑块工作正常。编辑：通过将幻灯片和更改都添加到初始化中来解决此问题。 @贾斯珀
非常适合我！将此与滑块的自定义 jQuery UI 主题一起使用，就像我为在后台播放的 MP3 自定义音量滑块一样。

【解决方案2】：

这是 quick jsFiddle example（注意：音频在页面加载时开始）。

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>

【讨论】：

【解决方案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;
    });
});

【讨论】：

【解决方案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 ;
});

【讨论】：