Autoplay Audio in Loop

Question

i am looking for autoplay an audio in loop without getting blocked by browser.

Code :

<audio id="audio1" src="assest/sound/1.mp3" autoplay="" />
      <script>
         a = document.getElementById('audio1');
         
         a.onended = function(){setTimeout("a.play()", 1000)}
      </script>

My current code working on firefox but in default it is blocked, i have to allow autoplay manually so it can play the audio and in other side in chrome the audio is not even playing.

Edited :

Iframe code :

<iframe src="assest/sound/1.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe> 

I have even tried iframe auto play code but it still not working with chrome. iframe code automatically trigger auto download of audio file.

Any solution for this?

Answer 1

WITH HTML

<audio controls autoplay loop hidden>
    <source src="assest/sound/1.mp3" type="audio/mpeg">
</audio>

Answer 2

Please have a look at this document to know what is the problem that you're facing: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide.

As described in the document:

As a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true:

• The audio is muted or its volume is set to 0
• The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
• If the site has been allowlisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
• If the autoplay feature policy is used to grant autoplay support to an and its document.

I think a reasonable way is to let users interact with your site first. Eg:

• Show an in-page popup and the user clicks to close it;
• Ask users whether they want to listen to music or not;
• ...

After they interacted with your site, you can run the script to play the audio without browser blocking.