To position text beside a button, you can enclose everything in another div with the CSS properties display: flex; and flex-direction: row;
When it comes to handling audio, I utilize JavaScript to create a new audio object which allows for easy playback control.
If you need to incorporate multiple sounds, simply modify the toggleSound() function to accept a string parameter for the song name. By iterating over the string, you can dynamically check for associated sounds making this method scalable. Add more audio objects along with additional cases in the switch statement and buttons to manage them effortlessly.
In each button, ensure to specify the corresponding audio name so that you can have numerous buttons triggering a single sound.
// example of setting up audio files
const song1 = new Audio(
"https://ia800905.us.archive.org/19/items/FREE_background_music_dhalius/backsound.mp3"
);
// another sample audio file
const song2 = new Audio(
"https://ia800905.us.archive.org/19/items/FREE_background_music_dhalius/FormulaFantasy.mp3"
);
function toggleSound(audioName) {
// switch case to handle different audio files
switch(audioName.toString()) {
case "song1":
var x = song1;
break;
case "song2":
var x = song2;
break;
default:
// set default audio file
var x = song1;
}
if (x.paused) {
x.play();
} else {
x.pause();
}
}
.button {
margin: 0 10px 10px 0;
background: lightgray;
}
.button:hover {
cursor: pointer;
}
.parent {
display: flex;
flex-direction: column;
}
<div class="parent">
<div style="display: flex; flex-direction: row;">
<!-- your cool button div -->
<div onclick="toggleSound('song1');" class="button">
Song 1
</div>
Impressive button linked to the first song.
</div>
<div style="display: flex; flex-direction: row;">
<!-- your cool button div -->
<div onclick="toggleSound('song2');" class="button">
Song 2
</div>
Button for the second song.
</div>
</div>