Question:
Didn’t find a way to enable the sounds by default in web content including IG/FB/Web Stories. Is it possible?
Answer:
No, it is not possible to enable audio by default. Browsers often explicitly blacklist this behavior and only allow audio to be enabled after a user gesture, e.g:
- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
- https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
The global muted state of an amp-story starts off muted; users must always unmute the story for the audio to play out.
Autoplay Policy Changes
Note: The Autoplay Policy launched in M66 Stable for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy will launch in M71. This affects web games, some WebRTC applications, and other web pages using audio features. Developers will need to update their code to take advantage of the policy.
Chrome’s autoplay policies will change in April of 2018 and I’m here to tell you why and how this is going to affect video playback with sound. Spoiler alert: users are going to love it!
New behaviors
As you may have noticed, web browsers are moving towards stricter autoplay policies to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.
Chrome’s autoplay policies are simple:
- 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 a 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.
Media Engagement Index (MEI)
The MEI measures an individual’s propensity to consume media on a site. Chrome’s current approach is a ratio of visits to significant media playback events per origin:
- Consumption of the media (audio/video) must be greater than 7 seconds.
- Audio must be present and unmuted.
- Tab with the video is active.
- The size of the video (in px) must be greater than 200×140.
From that, Chrome calculates a media engagement score which is highest on sites where media is played regularly. When it is high enough, media playback is allowed to autoplay on desktop only.
User’s MEI is available at the chrome://media-engagement internal page.
Best Practices for Web Developers
Websites should assume any use of <video> or <audio> requires a user gesture click to play. It’s important to detect if auto-play was denied, since users now can turn off all forms of auto-play, including silent videos. The code snippet below shows just how easy this is to check. It’s worth pointing out that the new auto-play policies apply both to video used as a tool for making something visual happen (like background video or video-as-animated-gif) and also to video that serves as consumable content. We recommend web developers test their sites with these new behaviors, ensuring any custom media controls behave correctly when auto-play is disabled, either automatically by Safari or by users.
- Websites using WebKit’s built-in media controls automatically work great with the new policies.
- Don’t assume a media element will play and don’t show the pause button from the start. Look at the Promise returned by the play function on HTMLMediaElement to see if it was rejected:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
- Auto-play restrictions are granted on a per-element basis. Change the source of the media element instead of creating multiple media elements if you want to play multiple videos back to back (or play a pre-roll ad with sound, followed by the main video).
- Don’t play ads without showing media controls because they may not auto-play and users will have no way of starting playback.
- Remember that audio tracks that render silence are still audio tracks, and their existence affects whether a video will auto-play at all. In these cases, a video with silent audio tracks won’t play. The audio track should be removed, or the muted attribute can be set on the media element alternatively.
