Categories
Design, Music, Life Q&A Web Design WordPress

Could sound be enabled by default in Web Stories?

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience.

Question:

didn’t find a way to enable by default the sound in an AMP Story. 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:

The global muted state of an amp-story starts off muted; users must always unmute the story for 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!

Figure 1. Internet memes tagged “autoplay” found on Imgflip.

New behaviors

As you may have noticed, web browsers are moving towards stricter autoplay policies in order 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:

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 video is active.
  • 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 on a regular basis. 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 have the ability to 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 site 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, alternatively, the muted attribute can be set on the media element.

Ref: https://stackoverflow.com/questions/48775292/is-it-possible-to-enable-by-default-the-sound-in-amp-story

QR Code

By Green

AMP, Branding, Copywriting, Marketing, Multilingual, WordPress - https://linktr.ee/gjazz

Leave a Reply

Your email address will not be published. Required fields are marked *