I was wondering if it's possible to play multiple audio files with just one button? From there, I want the user to be able to mute each audio file, so everything runs simultaneously.
I don't have much experience with backend web development, so a little push in the right direction would be greatly appreciated!
You can start playing of multiple audios on the click of a single button simply by calling the play function on each audio you want to start.
This snippet has a couple of audio elements. On button click they each have their play function called.
Note that each one has the controls attribute so the user can pause them individually. (It also has loop on each just for this demo as each audio is quite short).
function playAll() {
document.querySelector('.container').classList.add('playing');
const audios = document.querySelectorAll('audio');
audios.forEach(audio => {
audio.play();
});
}.container {
display: none;
}
.container.playing {
display: block;
}<button onclick="playAll();">Play them all</button>
<div class="container">
<h2>Horse
</h2> <audio src="https://www.w3schools.com/html/horse.mp3" controls loop></audio>
<h2>Placeholder</h2> <audio src="https://ia903002.us.archive.org/18/items/placeholder/placeholder.mp3" controls loop></audio>
</div>