Control audio volume with jquery

Question

Hello I am trying to make a new volume bar for my sound, however it's not working, i googled upon this, and tried to put it togheter again but the first code is missing at the moment so I dont know how to acheive this. I did something like this but my sound is not autoplaying and i cannot change the volume on the sound. and if i writes controls autoplay the whole bar shows up which i dont want.

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

score 2 · Accepted Answer · answered Dec 16 '19 at 11:11

You are not forced to use jquery for that, here is a possible way with just 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>

score 0 · Answer 2 · answered Dec 16 '19 at 10:59

0

Here is a quick one

$('#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>

answered Dec 16 '19 at 10:59

Lewa Bammy Stephen

401
1
5
14

2

do I need jquery ui for this? cause it doesn't work – Dec 16 '19 at 11:02
No, just jQuery. – Lewa Bammy Stephen Dec 16 '19 at 11:12

score 0 · Answer 3 · answered Dec 16 '19 at 11:20

Try this code:

<!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>

Control audio volume with jquery

3 Answers3