Autoplay Audio in Loop-CodePudding

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?

CodePudding user response：

WITH HTML

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

CodePudding user response：

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.