{"id":26912,"date":"2020-12-15T18:28:07","date_gmt":"2020-12-15T10:28:07","guid":{"rendered":"https:\/\/facekungfu.com\/?p=26912"},"modified":"2022-10-25T21:21:21","modified_gmt":"2022-10-25T13:21:21","slug":"audio-policy-is-it-possible-to-enable-by-default-the-sound-in-amp-story","status":"publish","type":"post","link":"https:\/\/facekungfu.com\/en\/audio-policy-is-it-possible-to-enable-by-default-the-sound-in-amp-story\/","title":{"rendered":"Could sound be enabled by default in web content including IG\/FB\/Web Stories?"},"content":{"rendered":"<h2 class=\"wp-block-heading\" id=\"question\">Question:<\/h2>\n\n\n<p>Didn&#8217;t find a way to enable the sounds by default in web content including IG\/FB\/Web Stories. Is it possible?<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"answer\">Answer:<\/h2>\n\n\n<p>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:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developers.google.com\/web\/updates\/2017\/09\/autoplay-policy-changes\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developers.google.com\/web\/updates\/2017\/09\/autoplay-policy-changes<\/a><\/li><li><a href=\"https:\/\/webkit.org\/blog\/7734\/auto-play-policy-changes-for-macos\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/webkit.org\/blog\/7734\/auto-play-policy-changes-for-macos\/<\/a><\/li><\/ul>\n\n\n\n<p>The global muted state of an\u00a0<code>amp-story<\/code>\u00a0starts off muted; users must always unmute the story for the audio to play out.<\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"autoplay_policy_changes\">Autoplay Policy Changes<\/h2>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Note:<\/strong>&nbsp;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.<\/p><\/blockquote>\n\n\n\n<p>Chrome&#8217;s autoplay policies will change in April of 2018 and I&#8217;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!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/imgflip.com\/i\/ngd6c\"><img decoding=\"async\" src=\"https:\/\/i.imgflip.com\/ngd6c.jpg\" alt=\"\"\/><\/a><figcaption><strong>Figure 1.<\/strong>\u00a0Internet memes tagged &#8220;autoplay&#8221; are found on\u00a0<a href=\"https:\/\/imgflip.com\/i\/ngd6c\" target=\"_blank\" rel=\"noreferrer noopener\">Imgflip<\/a>.<\/figcaption><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"new_behaviors\">New behaviors<\/h2>\n\n\n<p>As you may have\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/webkit.org\/blog\/7734\/auto-play-policy-changes-for-macos\/\" target=\"_blank\">noticed<\/a>, 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.<\/p>\n\n\n\n<p>Chrome&#8217;s autoplay policies are simple:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Muted autoplay is always allowed.<\/li><li>Autoplay with sound is allowed if:<ul><li>User has interacted with the domain (click, tap, etc.).<\/li><li>On desktop, the user&#8217;s\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/web\/updates\/2017\/09\/autoplay-policy-changes#mei\" target=\"_blank\">Media Engagement Index<\/a>\u00a0threshold has been crossed, meaning the user has previously played a video with sound.<\/li><li>The user has\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/web\/updates\/2017\/02\/improved-add-to-home-screen\" target=\"_blank\">added the site to their home screen<\/a>\u00a0on mobile or\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/desktop\" target=\"_blank\">installed the PWA<\/a>\u00a0on desktop.<\/li><\/ul><\/li><li>Top frames can\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/web\/updates\/2017\/09\/autoplay-policy-changes#iframe\" target=\"_blank\">delegate autoplay permission<\/a>\u00a0to their iframes to allow autoplay with sound.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"media_engagement_index_mei\">Media Engagement Index (MEI)<\/h3>\n\n\n<p>The MEI measures an individual&#8217;s propensity to consume media on a site. Chrome&#8217;s\u00a0<a href=\"https:\/\/docs.google.com\/document\/d\/1_278v_plodvgtXSgnEJ0yjZJLg14Ogf-ekAFNymAJoU\/edit\" target=\"_blank\" rel=\"noreferrer noopener\">current approach<\/a>\u00a0is a ratio of visits to significant media playback events per origin:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Consumption of the media (audio\/video) must be greater than 7 seconds.<\/li><li>Audio must be present and unmuted.<\/li><li>Tab with the video is active.<\/li><li>The size of the video (in px) must be greater than\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/1c63b1b71d28851fc495fdee9a2c724ea148e827\/chrome\/browser\/media\/media_engagement_contents_observer.cc#38\" target=\"_blank\">200&#215;140<\/a>.<\/li><\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>User&#8217;s MEI is available at the&nbsp;<em>chrome:\/\/media-engagement<\/em>&nbsp;internal page.<\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"best_practices_for_web_developers\">Best Practices for Web Developers<\/h2>\n\n\n<p>Websites should assume any use of\u00a0<code>&lt;video><\/code>\u00a0or\u00a0<code>&lt;audio><\/code>\u00a0requires a user gesture click to play. It\u2019s 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\u2019s 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.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Websites using WebKit\u2019s built-in media controls automatically work great with the new policies.<\/li><li>Don\u2019t assume a media element will play and don\u2019t show the pause button from the start. Look at the Promise returned by the play function on HTMLMediaElement to see if it was rejected:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var promise = document.querySelector('video').play();\n\nif (promise !== undefined) {\n    promise.catch(error =&gt; {\n        \/\/ Auto-play was prevented\n        \/\/ Show a UI element to let the user manually start playback\n    }).then(() =&gt; {\n        \/\/ Auto-play started\n    });\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>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).<\/li><li>Don\u2019t play ads without showing media controls because they may not auto-play and users will have no way of starting playback.<\/li><li>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\u2019t play. The audio track should be removed, or the muted attribute can be set on the media element alternatively.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Ref: <a href=\"https:\/\/stackoverflow.com\/questions\/48775292\/is-it-possible-to-enable-by-default-the-sound-in-amp-story\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/stackoverflow.com\/questions\/48775292\/is-it-possible-to-enable-by-default-the-sound-in-amp-story<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[944,909,786,588],"tags":[899,263,973,972],"class_list":["post-26912","post","type-post","status-publish","format-standard","hentry","category-life-design-music","category-qa","category-web-design","category-wordpress","tag-amp","tag-audio","tag-ui-ux","tag-web-stories"],"jetpack_publicize_connections":[],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Green","author_link":"https:\/\/facekungfu.com\/en\/author\/yanggh\/"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/posts\/26912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/comments?post=26912"}],"version-history":[{"count":0,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/posts\/26912\/revisions"}],"wp:attachment":[{"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/media?parent=26912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/categories?post=26912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/facekungfu.com\/en\/wp-json\/wp\/v2\/tags?post=26912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}