I have a html file, where I can play several audios by clicking on their respective images (logos). When clicking on a image, the div containing it gets the "active" class, and the previous one loses it. That's how the code knows which audio is connected to a specific div (and logo).
Also, I added buttons that represent volume levels 0-20-40-60-80-100%. They work properly, but when changing the played audio file by clicking on a different image (when the "active" div changes), I need to set the volume again as it is treated as triggering a totally separate div and audio which did not have this volume level. I would like it to remain at let's say 20% once it is established by clicking the 20%-button. How this could be remembered as a general setting for a currently played one, no matter which one it is? Should I use for example the local storage to remember, which volume level was clicked last time?
$('.volume').on('click', 'button', function() {
var id = $(this).attr('id')
const imgClasses2 = $('.active img.r').attr('class');
const selector2 = 'audio.' + imgClasses2.split(' ').join('.');
if (id == "0") {
$(selector2).prop('volume', 0);
} else if (id == "20") {
$(selector2).prop('volume', 0.2);
} else if (id == "40") {
$(selector2).prop('volume', 0.4);
} else if (id == "60") {
$(selector2).prop('volume', 0.6);
} else if (id == "80") {
$(selector2).prop('volume', 0.8);
} else if (id == "100") {
$(selector2).prop('volume', 1);
}}
)