Browser Blocking Autoplay for Audio/Video in Splash Screen

Question

I'm trying to implement a splash screen with an autoplaying audio and video in my web app. However, most browsers (like Chrome and Firefox) block autoplay unless there is user interaction.

<div class="splash-screen" id="splashScreen">
   <audio autoplay id="background-audio"> 
      <source src="src/audio/intro-sound.mp3" type="audio/mp3">
   </audio>  

   <video class="splash-video" autoplay muted>
      <source src="src/videos/t-intro.mp4" type="video/mp4">
   </video>
</div>

Issue:

The video plays automatically (because it's muted). The audio does not play, likely due to browser autoplay policies.

Question:

• How can I allow audio autoplay without requiring user interaction?
• Is there a workaround to start audio playback when the page loads?
• Would playing audio inside a click or touch event be the only solution?

Any insights or solutions would be appreciated!