How to make audio autoplay on chrome

Question

audio autoplay working in Mozilla, Microsoft edge and old google chrome as well but not in new google chrome. they have blocked the autoplay. is there any way to make it au

Answer 1

i used pixi.js and pixi-sound.js to achieve the auto play in chrome and firefox.

<script>

            PIXI.sound.Sound.from({
            url: 'audios/tuto.mp3',
            loop:true,
            preload: true,
            loaded: function(err, sound) {
                    sound.play();

            document.querySelector("#paused").addEventListener('click', function() {
            const paused = PIXI.sound.togglePauseAll();

            this.className = this.className.replace(/\b(on|off)/g, '');
            this.className += paused ? 'on' : 'off';

            });
            }
            });

</script>

HTML:

<button class="btn1 btn-lg off" id="paused">
    <span class="glyphicon glyphicon-pause off"></span>
    <span class="glyphicon glyphicon-play on"></span>
</button>

it also works on mobile devices but user have to touch somewhere on the screen to trigger the sound.

Answer 2

Use iframe instead:

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>

Answer 3

I add controls attribute too tag audio, and simply hide it in CSS. And all works fine in Chrome.

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>

Answer 4

I've been banging away at this today, and I just wanted to add a little curiosum that I discovered to the discussion.

Anyway, I've gone off of this:

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio id="audio" autoplay>
  <source src="helloworld.mp3">
</audio>

This:

<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
  document.getElementById("myAudio").play();
</script>

And finally this, a "solution" that is somewhat out of bounds if you'd rather just generate your own thing (which we do):

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

The discovery I've made and also the truly funny (strange? odd? ridiculous?) part is that in the case of the former two, you can actually beat the system by giving f5 a proper pounding; if you hit refresh repetetively very rapidly (some 5-10 times ought to do the trick), the audio will autoplay and then it will play a few times upon a sigle refresh only to return to it's evil ways. Fantastic!

In the announcement from Google it says that for media files to play "automatically", an interaction between the user and the site must have taken place. So the best "solution" that I've managed to come up with thus far is to add a button, rendering the playing of files less than automatic, but a lot more stable/reliable.

Answer 5

There is a really neat trick to use the autoplay-function of the audio tag in chrome.

Add

<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>

whereas silence.mp3 only is 0.5 seconds of silence.

This

<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>

works afterwards.

Chrome notices that a sound has been played and gives the permission for autoplay in audio tags.