使用 jquery 控制音量答案

【问题标题】：Control audio volume with jquery使用 jquery 控制音量
【发布时间】：2019-12-16 10:47:42
【问题描述】：

您好，我正在尝试为我的声音制作一个新的音量条，但它不起作用，我在 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);
}
});
});

【问题讨论】：

标签： jquery html audio

【解决方案1】：

您不必为此使用 jquery，这是一种仅使用本机 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>

【讨论】：

【解决方案2】：

这是一个快速的

$('#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 ui吗？因为它不起作用
不，只是 jQuery。

【解决方案3】：

试试这个代码：

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
         $(document).ready(function(){
          $('#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;
             }
         });
         });
      </script>
   </head>
   <body>
      <div id="audioSlider"></div>
      <audio id="audio1" autoplay>
         <source src="http://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3" type="audio/mpeg" />
         Your browser does not support the audio element.
      </audio>
   </body>
</html>

【讨论】：