how would I make a volume slider in html?

user_18412531 0
Viewed 427

I'm currently trying to make a volume slider for my site, due to the fact i know very, very limited js - i cant figure out how.

code below

      var audio = new Audio("audio.mp3");
      audio.volume = 1;
      audio.loop = true;
      document.onclick = function() {
        audio.play();
      }

i tried using ids, classes and more still didn't work for me

slider audio html javascript
1 Answers

Something fairly simple could work for you. You could create a range input into your html file and then use that specific range to create a volume slider

Volume slider in html:

<input type="range" id="volume-slider">

You could then use that slider in js and convert its value to change your volume like so:

let volume = document.getElementById('volume-slider');
volume.addEventListener("change", function(e) {
    audio.volume = e.currentTarget.value / 100;
})

Source from a similar answer: Js Audio Volume Slider

user_180682580
Related