Amp story auto-advance-after a background-audio skips the page on iOS

[mszylkowski]

When setting the auto-advance-after to the pageID it should use the background-audio length to advance, but on iOS (tested on Safari) it auto-advances the page really fast. This makes it impossible to navigate backwards.

<amp-story-page id="p8" auto-advance-after="p8" background-audio=".audio.mp3">
</amp-story-page>

The background audio does load and play if the auto-advance is disabled on the page, so the problem should not be related to the audio file.

cc @ampproject/wg-stories

[newmuis]

Technically I don't think this is supported (the ID is supposed to be that of a media element), but I agree we should either (a) support this, or (b) fail more explicitly (e.g. console error that says this is not supported).

[gmajoulet]

It's actually supported, I'd be curious to know when it broke and how it's broken.

Code:

amphtml/extensions/amp-story/1.0/page-advancement.js

Lines 1143 to 1152 in cdc2855

	if (
	matches(
	pageEl,
	`amp-story-page[background-audio]#${escapeCssSelectorIdent(
	autoAdvanceStr
	)}`
	)
	) {
	element = pageEl;
	}

Test:

amphtml/extensions/amp-story/1.0/test/test-page-advancement.js

Lines 187 to 199 in cdc2855

	it('should return a media advancement for amp-story-page with background audio', () => {
	const pageEl = html`
	<amp-story-page
	id="story-id"
	auto-advance-after="story-id"
	background-audio="foo.mp3"
	>
	</amp-story-page>
	`;
	const advancement = AdvancementConfig.forElement(win, pageEl);
	expect(advancement).to.be.instanceOf(MediaBasedAdvancement);
	});

Given we have a unit test to make sure we create the correct advancement mode, I'd think the code fails here when we try to retrieve the audio element:

amphtml/extensions/amp-story/1.0/page-advancement.js

Lines 993 to 997 in cdc2855

	} else if (
	this.element_.hasAttribute('background-audio') &&
	tagName === 'amp-story-page'
	) {
	return this.element_.querySelector('.i-amphtml-story-background-audio');

[mszylkowski]

The functionality works on Desktop and Android but not iOS, which is weird. The Q/A story we use for audio has an example of this, but the Q/A story has an mp4 video as background-audio, which might contribute to the bug not triggering. @hongcatlover sent me a video of this bug and was able to repro as well with an mp3 audio file

[newmuis]

Was the story muted when you tried this? I don't know whether the sequence of events for when you try to play a muted audio file is the same cross-browser (but, for playing muted video, the behavior is well-defined).