good afternoon I have problems with the audio in html I put autoplay to the audio tag but when I reload it does not play again, it does not throw any error and I have the audio in two different formats, chrome browser and the audio weighs about 4.5 mb
this is my html:
<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>
this is 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;
}
}
In Chrome and browsers based on it, autoplay does not work when there is sound. This is the same for the elements and . Autoplay is only possible when the "muted" attribute exists, example
More information: https://developer.chrome.com/blog/autoplay/
There used to be some tricks to get around this, using an iframe or silent sound file. These cheats no longer work, and as far as I know there is no cheat to date to get around this.
It should be noted that the sound can be activated by javascript, only after the user has had at least one interactivity with the page