Background audio stops playing on mobile when going to the next page

@denjones Hi there, thank you for your report. I can see the issue with your story on a mobile device as well, but I wasn’t able to reproduce it on my end yet.

Could you share your settings so I can try to recreate the issue?

To confirm, did you upload the audio file to the background audio in the Document panel or the page background audio file in the Design panel?

Can you try removing the audio file and uploading it again?

Who is your hosting provider?

Can you try checking if this issue occurs when only Web Stories has been enabled?

It happens after adding many pages (e.g. 10) that contain a video. Once the problem occurs, you can delete the other pages and the problem persists.

I just created a new story to test it again on my IPHONE ON SAFARI. And the problem reoccured. I also tested it on another website I manage, and I was able to reproduce it there also.

This is what I did:
1. Create new story
2. Add new background audio to the story by uploading it via the media overlay that becomes visible when you click on “upload an audio file” and “select upload files”. My music file is an mp3 that is more than 2 minutes long.
3. Add a 3th party video as a background on the first page
4. Add 2 more pages and also add 3th party videos as the background
5. Save the story and look at it.
6. The audio seems to work fine
7. Now take the 3th page and copy it 5 times, so you have 7 pages in total
8. Save the story and take a look at it again in the frontend
9. The audio isn’t working correctly anymore… in the beginning itseems to work correctly but after refreshing and replaying and going to the next & previous page it suddenly stops working correctly.

@denjones Can you tell me if you have anything uploaded to page background audio in the design panel?

Can you try removing the audio file and uploading it to the document panel > background audio again?

In my previous description I wrote:

2. Add new background audio to the story by uploading it via the media overlay that becomes visible when you click on “upload an audio file” and “select upload files”. My music file is an mp3 that is more than 2 minutes long.

By that I mean that I uploaded a new audio file to the page background audio in the Design Panel… I hope that is a good response to your question.

I also took a look at the url of the story that is visible in your screenshot. You are not using videofiles of each page so that is why the problem is not occurring in your story. The problem has something to do with the combination of many videos on many pages and general background audio.

Please try to reproduce my error by following the exact steps written in my previous answer.

@denjones Apologies, there must have been a lag before responding to you. Thank you for the detailed steps. I will follow up with any updates shortly.

@denjones You’re seeing the audio stop as you tap through the story because the audio is set at a page level. Page background audio should only apply to that page, and the current behavior you are seeing (where it carries over to the next page) is similar to an issue reported with the amp-story-player that is being investigated here: https://github.com/ampproject/amphtml/issues/36710.

You’ll actually want to use Background Audio in the Document Panel if the intention is to have the audio play through the story.

I’m sorry for the misunderstanding.
I didn’t upload the audio file at the Page level but as a Background Audio in the Document Panel. So I only uploaded the audio file once through the document panel, so it should keep on playing throughout the whole story. It works fine in a browser on my desktop. It doesn’t work fine when opening the story on my mobile phone.

Please try to reproduce it by following these steps:

1. Create new story
2. Add new background audio to the story by uploading it in the Document Panel via the media overlay that becomes visible when you click on “upload an audio file” and “select upload files”. My music file is an mp3 that is more than 2 minutes long.
3. Add a 3th party video as a background on the first page
4. Add 2 more pages and also add 3th party videos as the background
5. Save the story and look at it.
6. The audio seems to work fine on my iPhone in safari.
7. Now take the 3th page and copy it 5 times, so you have 7 pages in total
8. Save the story and take a look at it again on a smartphone.
9. The audio isn’t working correctly anymore… in the beginning it seems to work correctly but after refreshing and replaying and going to the next & previous page it suddenly stops working correctly.

Thank you very much!

@denjones Thanks so much for your further clarification. Unfortunately, your reports appears to be an AMP upstream issue that will be investigated further in the following ticket: https://github.com/ampproject/amphtml/issues/37243. I’ve just added a comment there to see if there are any updates on the next steps. You can follow the issue for other updates.

Is there a way to hide the volume icon at the top right of the pages when there is no background audio? Can I install a previous version of the plugin where the bug wasn’t present yet?

@denjones Hi there, we do not recommend reverting to older versions of the plugin.

Is there a way to hide the volume icon at the top right of the pages when there is no background audio?

It appears this issue is currently being reviewed in this AMP GitHub issue: https://github.com/ampproject/amphtml/issues/31592 . Please subscribe to the issue for any updates on the matter.