I have a problem with the audio on my page, everything is fine on the first load but when I reload it does not sound, thanks for your support
this is the HTML code:
<body>
<audio autoplay loop id="bg-musica">
<source src="/media/audio/quazar-city.mp3" type="audio/mp3">
<source src="/media/audio/quazar-city.ogg" type="audio/ogg">
</audio>
<form>
<fieldset>
<legend>Sonido</legend>
<label for="">Musica</label>
<input type="range" name="" id="barra-volumen" min="0" max="1" step="0.1">
<label for="mute">Mute <input type="checkbox" name="mute" id="mute"></label>
</fieldset>
</form>
and this my JS
//volume control
const $musica = document.getElementById("bg-musica");
const $barra = document.querySelector('#barra-volumen')
$barra.addEventListener("change",function(ev){
$musica.volume = ev.currentTarget.value;
},true);
//muted and unmuted (opciones)
const $mute = document.querySelector('#mute')
$mute.addEventListener("change", mutePlay, false);
function mutePlay() {
let checked = $mute.checked;
if(checked){
$musica.volume = 0;
}else {
$musica.volume = 1;
}
}
sorry for my english, Im spanish speaker, and thanks again :)