Initialize web with sound

Question

I am trying to make it start with the sound of the audio, I know that due to browser issues and good practices it does not allow it to start alone, is there a way to do it? I also want the video to start with the audio but it doesn't work either

<audio src="./src/video/sound.mp3" preload autoplay id="audio"></audio>
<video src="./src/video/video.mp4" id="video" class="hidden"></video>

document.getElementById('audio').play()
 
setTimeout(()=>{
  let video = document.getElementById('video')
  video.play()
  video.removeAttribute('muted')
  video.classList.remove('hidden')
 
  document.getElementById('audio').pause()
}, 10000)

So why don't you combine the sound into the MP4 file and just show that? — Tim Roberts, May 04 '23 at 02:07
Browsers deny AUDIO / SOUND autoplay before some visitor interaction with the website. — Ron, May 04 '23 at 02:08

score -1 · Answer 1 · answered May 04 '23 at 02:24

Comments

In general you want to give the user the option to play the audio / video rather than forcing it upon them. It's bad practice to do otherwise, that is why the browser standard doesn't allow a website to start audio / video without user interaction.

An alert box forces a user to interact with your website and allows you to start audio / video. Although I dislike this practice because it can get annoying for your visitors.

HTML

<body>

<!-- code -->

<script>
  // Get User Interaction
  alert("Welcome!");

  // Start Audio
  const audio = document.getElementById('audio');
  audio.play();

  // Start Video
  const video = document.getElementById('video');
  video.play()
  video.removeAttribute('muted')
  video.classList.remove('hidden')
</script>

<body>

Initialize web with sound

1 Answers1