Estoy trabajando en un proyecto de sitio web de video interactivo para uso personal. aquí quiero hacer un control de volumen para múltiples audios a la vez, ¿cómo puedo hacerlo?
Intenté hacer un control de volumen para un audio y funcionó:
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);y aquí mi etiqueta de audio:
<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>Claro, tienes que recorrer cada elemento de audio. Ver comentarios en el código a continuación.
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>