Amp-Stories background audio cuts off after slide 2 on mobile devices

[tomxbarnesx]

Description

We have a tap story featuring short videos, set to a single background audio track. Usually if one triggers the audio and taps through the story, the background audio will continue to play through the entire piece — until today. I checked our latest amp-story and found it always cuts after the second slide — across all our pieces actually, which did not used to have this issue. I have not begun to dig through the recent pull requests to try and identify the introduction of this issue, but I intend to do so in the next few days. Has anyone else experienced this issue?

Note: This not a problem within amp pages on desktop. It only affects mobile as far as I have seen.

Reproduction Steps

Example link: https://www.frame.media/undercovered/silent-deregulator

Turn on the sound and tap ahead two slides. The sound will most likely cut. I would love to hear that it does not.

Relevant Logs

No console errors on mobile, as far as I have been able to pick up.

Browser(s) Affected

No response

OS(s) Affected

iOS 15.1.1

Device(s) Affected

iPhone 13

AMP Version Affected

2112032204000

[LuckynaSan]

Hi there! Checking in here as we received a report about this in the Web Stories forum.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[den-jones]

Hi guys, can you please fix this bug, it's been a while since I reported this problem. Thank you!

[ychsieh]

It seems like there's no sound at all for the videos at https://www.frame.media/undercovered/silent-deregulator. I tried the mp4 files included in the amp-video in first 2 pages: https://d1no4zdj676ab.cloudfront.net/media/stories/silent-deregulator/element/UC_SDR_Slide1.mp4 and https://d1no4zdj676ab.cloudfront.net/media/stories/silent-deregulator/element/UC_SDR_Slide2.mp4, and both of them have no sounds.

Could you provide the story that we can reproduce this issue? Or even better you could record the reported issue on your end?

[den-jones]

Good news! I found the bug that is causing this problem to occur.

When a page has a video with no sound as the background of that page, the wordpress plugin adds this code in the html: noaudio="noaudio". When you have a general background music file for the whole web story, then the music will keep on playing both on web and on mobile when all the videos have noaudio="noaudio" when you tap to go to the next page. Example: https://liesbethdiels.be/web-stories/test-backround-music-videos-no-sound/

But when there is a video with sound on a pages, then the problem occurs because the tag noaudio="noaudio" is not there (which makes sense). The background music will keep on playing on web (like it is supposed to) but not on mobile anymore when you tap to go to the next page Example: https://liesbethdiels.be/web-stories/test-backround-music-videos-with-sound/

I hope this will help you fix this issue.

[ychsieh]

I don't think <video> is allowed inside <amp-video>. Could you try use <source> or specify src attribute instead as mentioned in https://amp.dev/documentation/components/amp-video?

Also I guess you want to have something like for each story page, if the video on the page has audio, then override the story-level background audio; if has not audio, play the story-level background audio. Is it correct? If so, it is a different issue than the one mentioned here, which is not reproducible as you also verified it above. And I am actually able to see the one you want works on both mobile and desktop. Could you share a video of the error you are seeing?

[den-jones]

Both Web Stories are created with the wordpress plugin Web Stories so I can't go and change the source code.

Let explain how it should work: If there is background audio for the whole web story, the background audio should keep on playing even if there is also sound in a video on a certain page. When you tap to go to the next or previous page, the background audio should keep on playing both in your browser and on my iPhone (Safari). The problem is that the background sound stops playing on my iPhone, the moment I tap to go to the next page. If I don't tap, the background sound keeps playing.

https://liesbethdiels.be/web-stories/test-backround-music-videos-no-sound/ -> this works as intented in your desktop browser and on your iPhone (safari) since all the videos on the pages have the tag noaudio="noaudio".

In this example the background audio stops playing on your iPhone in safari the moment you tap to go to the next or previous page: https://liesbethdiels.be/web-stories/test-backround-music-videos-with-sound/ -> these videos don't have the tag noaudio="noaudio". On your desktop browser is works as intended since the background audio keeps playing

I that more clear?

[den-jones]

@ychsieh Any update on this issue/bug? Thank you!

[ychsieh]

It is actually debatable from a product perspective about which behavior is a better UX, i.e. story-level audio or page-level audio which one has higher priority to override. I believe we thought the page-level takes higher priority when initially designed. So now this becomes a feature request about having an option to switch between two different priority assignments. I would need PM/UX perspectives to know if this should be done or not.

Whether which one we should go, this is no longer the same issue mentioned in the issue description above.