I'm working on an interactive video website project for personal use. here I want to make one volume control for multiple audio at once, how can I do it?
I've tried to make one volume control for one audio and it worked :
var audio = document.getElementById('bgsound1');
var volumeControl = document.getElementById('vol-control');
var setVolume = function(){
audio.volume = this.value / 100;
};
volumeControl.addEventListener('change',setVolume);
volumeControl.addEventListener('input',setVolume);
and here my audio tag :
<audio src="asset/sound/M2.mp3" id="bgsound1"></audio>
<audio src="asset/sound/sound2.mp3" id="bgsound2"></audio>
<audio src="asset/sound/sound3.mp3" id="bgsound3"></audio>
Sure, you have to loop throught each audio elements. See comments in the code below.
let volumeControl = document.getElementById('vol-control');
function setVolume (){
console.clear()
console.log(volumeControl.value)
// Get the array of audio element and loop through them to set the new volume value
Array.from(document.querySelectorAll("audio")).forEach(function(audio){
// if the input value is "", use zero
audio.volume = volumeControl.value == "" ? 0 : volumeControl.value / 100;
})
};
volumeControl.addEventListener('change', setVolume);
volumeControl.addEventListener('input', setVolume);
// On load
setVolume()<input id="vol-control" type="number" min="0" max="100" value="25">
<br>
<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" id="bgsound1" controls></audio>
<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3" id="bgsound2" controls></audio>
<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-16.mp3" id="bgsound3" controls></audio>