Unmute amp-story video as soon as it loads to ensure sound is enabled by default

Question

By looking at the answers in this question and seeing this PR, I understand why amp-stories are mute by default. But I want to try and unmute it as soon as the story loads.

Maybe by calling the same function that unmutes the story on tapping the sound button on top right corner ? Just instead of on 'click', I will call it on 'load'.

In amp-story-system-layer.js, this function initializeListeners_() initializes everything, and if I import these scripts on my page, I'm guessing something like this can work :

<script>
  window.addEventListener('load', function() {
    isMuted = false;
    this.storeService_.subscribe(
       StateProperty.MUTED_STATE,
       (isMuted) => {
         this.onMutedStateUpdate_(isMuted);
       },
       true
    );
  });
</script>

Any ideas? Is this the right direction? (I'm a beginner in javascript)

Thanks

Gmajoulet Gmajoulet · Accepted Answer · 2020-08-16T17:43:15

Because media can't play with sound without a user gesture on the web, you cannot build this feature in a web browser. If you try to unmute the media, the playback will fail.

The only way you have to make this work is within a native app, by enabling autoplaying unmuted media without requiring a user gesture. You need to (1) configure the webview, and (2) tell the story to unmute its media.

(1) configure the webview (default is to block unmuted media to play)

(2) tell the story to unmute its media You need to use the open source Story Web Player, as described here: https://github.com/ampproject/amphtml/issues/28416 Then you can do player.unmute() for each Story.

In summary what you want to do is:

Impossible in a web browser
Possible if the story is rendered in a native webview that was properly configured to autoplay unmuted media, using the Web Player to unmute the story

Unmute amp-story video as soon as it loads to ensure sound is enabled by default

1 Answers