CODEWITHSUNDEEP
javascripthtmlaudiorange
ladanta
ladanta

Reputation: 469

HTML range element to control volume of audio element

I'm trying to use the HTML range element to control the volume of an HTML audio element but running into some problems.

The setVolume function below is only one line and seemed to work in another answer on this site, and alongside the error I am getting ("Uncaught ReferenceError: setVolume is not defined") I feel like I am having trouble activating the function in the first place.

Anyone have any ideas?

Relavent HTML:

<div class="slides">
   <div class="slider-cont">
   <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0.30'>
    </div>
</div>

Script for the audio player:

window.onload = function() {
var audioPlayer = function() {
    var rainPlaying = false;
    var playRain = document.getElementById('playRain');
    var rainAudio = new Audio('audio/rain1.ogg');
    rainAudio.id = "rainLoop";
    rainAudio.loop = true;

    playRain.addEventListener('click', function() {
        if (rainPlaying) {
            rainPlaying = false;
            rainAudio.pause();

        } else {
            rainPlaying = true;
            rainAudio.play();

        }
    }, false);
    var setVolume = function() {
        rainAudio.volume = document.getElementById("volume1").value;
    };
  }();
};

Upvotes: 1

Views: 3758

Answers (1)

Richard Hamilton
Richard Hamilton

Reputation: 26444

setVolume is a local variable, available only to the scope of the function. That's why it's undefined. You can make it a global variable by removing the var keyword.

While this is generally not a good practice, in this case your code will work.

Look at this fiddle

https://jsfiddle.net/xyjn4mao/

Open up your console, you will no longer get a Reference Error.

Upvotes: 1

Related Questions