jquery - 使用jquery控制音频音量

Question

您好，我正在尝试为我的声音制作一个新的音量条，但是它不起作用，我用谷歌搜索了 this ，并尝试再次将其组合在一起，但目前缺少第一个代码，所以我不知道如何实现这一点。我做了类似的事情，但我的声音没有自动播放，并且我无法更改声音的音量。如果我编写控件自动播放，整个栏就会显示出来，这是我不想要的。

  <input type= "range" class = "slider" id = "slider" value = "0" maxlength ="100">
<audio id ="audio-player" src = "test.mp3"></audio>


 $( document ).ready(function() {
$("#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 1

您不必为此使用 jquery，这里有一种仅使用 native javascript 的可能方法:

slider.oninput = () => {
  console.log("Volume set to", ~~(slider.value))
  
  document.getElementById("audio-player").volume = ~~(slider.value) * 0.01
}

<input type= "range" class = "slider" id = "slider" value = "0" maxlength ="100">
<audio controls id ="audio-player" src = "test.mp3"></audio>