Lower background music volume when autoplay HTML

html, javascript

Solution

The event you need is called onloadeddata.

Also unless you need access to the myAudio variable from other functions or globally I would suggest moving it into the `setHalfVolume` function. Give this a try.

Change your HTML to:

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

Change your JavaScript to:

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 ;)
}

Problem

I have a page that has some animal images and when you click on them it plays the sound of the animal, but since its a kid's game I have a 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 set a function that does that? I don't want a function based on click, I want it hidden and change the volume automatically. The function (it's not working) ``` 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> ```

Original source