Audio AutoPlay Not Working In Browser Fixed 2021

Trying to embed autoplay audio or video but non of the autoplay attribute isn't working. Then today I will explain why audio autoplay not working as well as the solution of autoplay not working on any of the browsers.

Autoplay background music when someone visits your site is impressive but the autoplay function also helps to different advertisement networks. Google thinks that autoplay is out of control over the user or visitor side.

{tocify} $title={Table of Contents}

The different advertisement uses autoplay to display advertisement in autoplay video format which annoy many visitors. So due to this google change, the autoplay policy and many other browsers also follow the google chrome autoplay policy. So autoplay not working even in HTML. 

audio autoplay not working

Demo


Why Audio AutoPlay Not Working?

The main reason behind audio autoplay not working is the Google Chrome Autoplay Policy. In April 2018 Google Chrome strictly implemented the  Autoplay policy. Check out what is on Google Chrome Policy.


If you don't understand I will explain it briefly.

Chrome's autoplay policies

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
    • The user has added the site to their home screen on mobile or installed the PWA on desktop.
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Let's explain from point 1.

Muted autoplay is always allowed

Muted autoplay is always allowed means that if you add a muted attribute or if you mute your autoplay audio/video then the autoplay works perfectly without any issue.

Autoplay with sound is allowed

There are three points. let's describe it.
User has interacted with the domain: Whenever a user clicks or came from the same domain autoplay works.
I am going to use this point to autoplay the audio.
Other Points: You can easily understand others' points. Let's go for the solution.


Solution

As I already said I am going to use the second point that I am taking user permission to autoplay audio. Let's move towards the solution with a stepwise process.


Video Tutorial

coming soon

Steps To Fix Audio Autoplay Not Working

Here is the stepwise process to fix autoplay not working for all browsers. First, you need to add the audio tag with audio on normally. You need to create an audio player normally.


Step 1: Add Audio Player


Normally, you can use the below code to add the audio player with an audio file on it.

Code

<audio id="audio" controls="" style="width: 100%;"><source src="https://drive.google.com/u/0/uc?id=1u8K4M4z7kmxd4fZIjx67HL9xA8i9PSSg&amp;export=download" type="audio/mpeg">Please update your browser does not support the audio element.</audio>{codeBox}

 

audio autoplay not working html


Step 2: Ask Permission


We are using user permission to autoplay audio in blogger or any website. For that, you need to paste the below javascript code on the post that you want audio autoplay.

<script type="text/javascript">
function autoplay(){
    var r =confirm("Would You Like To AutoPlay Music?");
    if (r == true) {
        document.getElementById("audio").play();
    }
  }
</script>
<script>autoplay();</script> {codeBox}

 

autoplay not working html


Done. Now the autoplay works 100% as it also follows google audio autoplay policy. 

Overview

autoplay music html not working

You can see whenever the page loads it asks the user/visitor to start autoplay or not?
Also, you can change the question according to your wish.

Conclusion

This is how you can easily fix audio autoplay not working in a browser. I hope you like this solution and comment below if you have any problems.
Post a Comment (0)
Previous Post Next Post

Featured Posts

Blogger-Tricks