Analysis of Audio Autoplay Blocking on Browsers

1.     What Is Audio Autoplay Blocking?

                Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. In order to give users control over this, browsers often block audio autoplay. Specifically, whenthe audio or video tag contains the autoplay attribute, autoplay feature would be blocked once page is loaded. If the play API is forcibly called, an error message similar to "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first" will be reported.

HTML:

<video src="/video_with_audio.mp4" autoplay></video>

JavaScript:

videoElement.play();

When we using below function, autoplay of a video with an audio track on a new page will be stopped by the browser.

autoplay is not allowed by the browser until users engage with the page. For example, the play API will not be called until users click the playback button on the page.

PlayButton.addEventListener('click', () => {
  videoElement.play();
})

2.   Conditions for Audio Autoplay

In general, media will be allowed to autoplay only if at least one of the following conditions is met: 

• The audio is muted or its volume is set to 0.
• The user has engaged with the same-origin site (by clicking, tapping, pressing keys, etc.)
• If the site has been whitelisted, autoplay may occur either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
• Top frames need to delegate autoplay permission to cross-origin iframes to allow autoplay with sound. This permission is not required for same-origin iframes. Some browsers support this function, but the compatibility is limited.

a)     Muted autoplay:

If the muted attribute is added to the video tag, autoplay is allowed. Autoplay will be started once, you can click the button of unmuting audio.

HTML:

<video src="/video_with_audio.mp4" autoplay muted></video>

JavaScript:

videoElement.play();

b)    Same-origin permission grant:

Click the playback button on index.html to open the same-origin video-frame.html page. The video is automatically played with sound on the video-frame.html page.

index.html:

playButton.addEventListener('click', () => {
    window.open("video-frame.html","_blank");
})

video-frame.html:

document.querySelector('video').play()

If the video-frame.html page is refreshed, the autoplay will be blocked.

c)     Media Engagement Index (MEI)

The Media Engagement Index (MEI) measures an individual's propensity to consume media on a site. Chrome's approach is a ratio of visits to significant media playback events per origin:

• Consumption of the media (audio/video) must be greater than seven seconds.
• Audio must be present and unmuted.
• The tab with the video is active.
• Size of the video (in px) must be greater than 200 x 140.

From that, Chrome calculates a media engagement score. When the score is high enough, media autoplay is allowed on a device. The user's MEI can be found on about://media-engagement.

The exact situations that result in blocking, and the specifics of how sites become whitelisted, vary from browser to browser, but the above are good reference. 

You can set the browser startup parameter --user-data-dir=C:\Temp\chrome-data to point the browser data to a new directory and reset the MEI.

Reset MEI:

d)    iframe delegation

The current page is embedded into the cross-origin video-frame.html page through the iframe:

var div = document.createElement("div");
div.innerHTML = '<iframe src="http://localhost:8080/video-frame.html" allow="autoplay"></iframe>';
document.body.appendChild(div);

Video autoplay on the cross-origin video-frame.html page:

<video src="/video_with_audio.mp4" autoplay></video>

After allow="autoplay" is added to the iframe tag, top frames delegate autoplay permission to iframes. Safari does not support this method. Please refer the below compatibility chart for more reference:

3.   Best Practices

a)     Muted autoplay:

Muted autoplay is allowed on a new page, and then users can click unmute to unmute the audio.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

b)    Listening on autoplay error:

If the error message NotAllowedError is reported after autoplay, the playback button can be displayed on the page to instruct users to click the playback button.

let startPlayPromise = document.querySelector('video').play()

if (startPlayPromise !== undefined) {
   startPlayPromise.then(() => {
      console.log('autoplay success')
    }).catch((error) => {
      if (error.name === "NotAllowedError") {
        console.log('autoplay error')
      } else {
        console.log('other error')
      }
    });
}

If the video tag is used to play only the video track and another audio tag is used to play the audio track, the video track is not restricted and can autoplay. Only the audio track is restricted. In this case, instruct users to click unmute.

Effect picture 1:

Effect picture 2:

Reference Documents:

mdn web docs- Autoplay guide for media and Web Audio APIs

Autoplay Policies in Chrome

Autoplay Policy Changes in macOS

Allowing or Denying Autoplay in Firefox