Decrease background music while autostarting HTML

Question

I have a page with images of animals, and when you click on them, it reproduces the sound of the animal, but from the moment of its playing with the kids I have background music, but the sound is too loud. I want when the background music plays automatically, the volume changes to 0.5. How can I install a function that does this? I don’t need a click-based function, I want it to be hidden and automatically change the volume.

Function (it does not work)

myAudio = document.getElementById("audio1");

function setHalfVolume() { 
    myAudio.volume = 0.4;
}

HTML

<audio id= "audio1" controls="controls"  onload="setHalfVolume()">
    <source src="Audio\Jaunty Gumption.mp3"  type="audio/mp3">
</audio>

Answer 1

The required event is called onloadeddata .

, myAudio , setHalfVolume. .

HTML :

<audio id= "audio1" controls="controls" onloadeddata="setHalfVolume()">
    <source src="Audio\Jaunty Gumption.mp3"  type="audio/mp3">
</audio>

JavaScript :

function setHalfVolume() {
    var myAudio = document.getElementById("audio1");  
    myAudio.volume = 0.5; //Changed this to 0.5 or 50% volume since the function is called Set Half Volume ;)
}

Answer 2

play setHalfVolume:

document.querySelector('#audio1').addEventListener('play', setHalfVolume);

, , , reset

document.querySelector('#audio1').addEventListener('pause', resetVolume);

resetVolume setHalfVolume :

function setHalfVolume() { 
    document.getElementById("audio1").volume /= 2;
}
function resetVolume() { 
    document.getElementById("audio1").volume *= 2;
}