Q:

How Do I use one slider to control all the volumes?

CodePen, audio question
I'm working on the Simon game for the first certificate at FreeCodeCamp.com
I have 6 different audio files that play in response to different events.
I'm trying to add a volume slider to control the volume of this tab..
How Do I use one slider to control all the volumes?
JavaScript
window.SetVolume = function(val)
{

  var player = document.getElementsByTagName("audio");
    console.log('Before: ' + player.volume);
    player.volume = val / 100;
    console.log('After: ' + player.volume);
}
const playerInput = document.getElementById('player_sInput')
const pads = document.querySelectorAll('.pad')
var player_sInput = []

// Convert the pad list to an array so that 
// we can iterate over it using .forEach()
Array.from(pads).forEach((pad, index) => {

  // Get the associated audio element nested
  // in the pad-div
  const audio = pad.querySelector('audio')

  // Add a click listener to each pad which
  // will play the audio, push the index to 
  // the user input array, and update the span
  pad.addEventListener('click', () => {
    audio.play()
    player_sInput.push(index)
    playerInput.textContent = "Player's reply " +player_sInput
  })
})

var simon_sSequence = [];

function audioBlack() {
  //clear player's input for this turn
 player_sInput = [];
  //generate a random number
  //push random number to simon_sSequence
  simon_sSequence.push(Math.floor(Math.random() * 3));
  console.log(simon_sSequence);
  $("#simon_sSequence").text("Simon says " +simon_sSequence);
//  $("#player_sInput").text("Player's reply " +player_sInput);
  //for each in the array set time interval(300ms);
  //dipslay hover effect
  //play pad sound
  var audio = document.getElementById("audioBlue");
  audio.play();
}

HTML
<body>
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
  <div id="container">
    <div id="green" class="pad" onclick="audioPad['green'].play()">
      <audio preload="auto" id="audioGreen" <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- upper left -->

    <div id="red" class="pad" onclick="audioPad['red'].play()">
      <audio preload="auto" id="audioRed" <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- upper right -->

    <div id="yellow" class="pad" onclick="audioPad['yellow'].play()">
      <audio preload="auto" id="audioYellow" <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- lower left -->

    <div id="blue" class="pad" onclick="audioPad['blue'].play()">
      <audio preload="auto" id="audioBlue" <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <!-- lower right -->

    <div id="startTapper" class="pad" onclick="audioBlack()">
      <div>
        <span id="simon_sSequence">Shall we</span>
        <span id="player_sInput">play a game?</span>
      </div>
      <!-- end of "display" -->
    </div>
    <!-- end of "startTapper" -->
  </div>
  <!-- end of "container" -->
</body>

A:

Sure looks likes you were super close. Just need to set the volume attribute on your audio object.
1) Keep track of the global volume variable
var globalVolume = 1;

2) Inside your setVolume function, change globalVolume as the user changes it
player.volume = val / 100;
globalVolume = player.volume;

3) Inside the pad.addEventListener('click') event, just before you call audio.play(), set the audio's volume attribute
audio.volume = globalVolume;
audio.play();

Your codepen with the above modification; https://codepen.io/joshuaohana/pen/LLQKmd?editors=1011

