Sounds stop playing after mobile app loses focus

[Article19]

Audio initially loads and plays correctly on mobile browsers (tested in Safari, Chome, Firefox, Edge). Switch to another app, then back - sounds no longer play.

All sounds are preloaded using the Pixi shared loader. Have tried playing from the loader directly and by loading into the Pixi audio cache. Verified that the sound is there, and volume is 1.

This is also true of all sound on the Pixi Sound Demo page.

Pixi legacy 5.1.6 Pixi sound 3.0.4 iOS 13.3.1 (on an iPhone SE)

May be the same issue as #110

[bigtimebuddy]

Check out: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API you can use this too pause, stop everything and then resume when you come back. For instance:

when tab is hidden

PIXI.Ticker.shared.stop();
PIXI.sound.pauseAll();

when tab comes back

PIXI.Ticker.shared.start();
PIXI.sound.resumeAll();

Could you let me know if this works? I haven't been able to reproduce the issue on my desktop browser.

[Article19]

Implemented the Page Visibility API. Probably a useful idea wrt managing resources on a mobile device, but unfortunately did not solve the problem.

To be clear - I am only seeing this issue on mobile, not on the desktop.

** I just tested this with an HTML5 app I made with a different platform (CreateJS) and the effect is the same (no audio after tab loses focus). Perhaps this is some browser-implemented limit? Seems odd to permanently disable audio in a tab, if that's what's happening.

[zzwx]

Same here. Both Safari and Firefox stops playing sounds after minimizing the browsers and coming back. iPhone SE. Weird observation. After a couple of attempts to minimize/maximize, the sounds seems to come back as if it was picked from a queue. Same in both browser mode and "full screen" (share to home screen) mode.

		"pixi-sound": "^3.0.4",
		"pixi.js": "5.2.4"

[peacegiverman]

Phaser has dealt with a similar issue. They solved it by forcing the audio context to resume after focus is restored. See this change: https://github.com/photonstorm/phaser/commit/e5f4548961e2525cfe6fab4e171799cb9c98fe41

[peacegiverman]

I've just added the fix to my game and it works. When you switch back to the browser, sound resumes immediately.

Here's a snippet of what I did:

window.addEventListener('focus', () => {
  const context = sound.context.audioContext;

  if (context.state === 'suspended' || context.state === 'interrupted') {
    context.resume();
  }
});

Note that it is important to resume on both "suspended" and "interrupted". Safari uses the non-standard "interrupted" state in some cases, such as when the app loses focus because the screen is locked or when the user switches to another app.

[bigtimebuddy]

Good fix @peacegiverman. We should add this to the library and do it automatically.