Audio slider to control volume for all sound coming out of this tab

code pen, audio question

I have four separate sounds being played in the event listener depending on which button is pressed. Beta testing the other night, I realized the game was particularly loud compared to another tab I was listening to in the background, so I wanted to just add an audio slider per the whole page, independent of which sound is being played… Tutorials are particularity appreciated if you have any links to share? But my main question is how do I add an audio slider to control volume for the entire page?

<body>]
  <audio controls>
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
  <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>
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();
}

Got an answer at Stack Over Flow

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.