Play the music automatically on page load in the background in JavaScript or jquery

Question

I'm trying to play the music or mp3 audio once the page load I tried to load the function once the page load but it is not working only once I click on the button the music will start playing below the code

HTML

<audio id="audio1" src="bk.mp3" >
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
<button onclick="playAudio()" type="button" id="pp">Play Audio</button>
<button onclick="pauseAudio()" type="button" id="pp2">Pause Audio</button>

Javascript

<script>
var x = document.getElementById("audio1"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 

</script>

the above code will play the audio once click on the button play but my point I need it to start playing automatically on load the same for Jquery i tried different method but the same only working on click

Answer 1

Simple implementation

First, add an audio element to the page and load the audio's source with the src attribute:

<audio src="https://www.bensound.com/bensound-music/bensound-moose.mp3"></audio>

Next, use JavaScript to listen to the DOMContentLoaded event, select the audio event and call audio.play():

window.addEventListener("DOMContentLoaded", event => {
  const audio = document.querySelector("audio");
  audio.volume = 0.2;
  audio.play();
});