phaser: iOS: SAFARI: INTERMITTENT?: Audio doesn't resume after opening link or switching tabs

Version

Phaser Versions: Phaser v3.22.0 (WebGL | Web Audio) Phaser v3.20.1 (WebGL | Web Audio) Phaser v3.20.0-FB (WebGL | Web Audio) Phaser v3.19.0-FB (WebGL | Web Audio)
Operating system: Reproduced on iOS 10.3.3, 12.1.4, 12.2, 12.3.1, 12.4.1, 12.4.2, 13.0
Browser: Safari
Devices reproduces this issue consistently: iPhone X (Safari 12.4.1) iPhone 7 (Safari 13.0) iPhone 6 Plus (Safari 12.4.2) iPhone 6 (Safari 12.3.1) iPad 4 (Safari 10.3.3, MD514LL/A)
Devices NOT REPRODUCED (could have sworn it did reproduce at one point, meh): iPhone 5 (Safari 10.3.3) … may be intermittent or some other factor?

Description

Steps:

On the iPhone, inside of Safari, go to https://adidasbaseballsnextlevel.com/ (also, bare-bones reproduction is available at https://micsun-al.github.io/tests/phaser3-ios-audio-issue/index.html)
Tap once to begin the background audio loop.
Tap one of the logos to open a link in a new tab.
Close the new tab and return to the game.

Expected Behavior: The audio should resume playing.

Current Behavior: Returning to the app tab does not resume audio … sometimes. It doesn’t seem consistent for some reason. Sometimes minimizing the game using the home button, and then returning to it has the same behavior. I can’t seem to get this to reproduce, or not reproduce 100% of the time on any of the iPhones.

Here’s a video of it reproducing on the iPhone X: https://youtu.be/QvzvDy2yAyo

Example Test Code

Code: https://github.com/micsun-al/phaser3-test-audio-ios

Preview: https://micsun-al.github.io/tests/phaser3-ios-audio-issue/index.html

…But basically, a looping sound will reproduce this issue, and also any new audio play seems to not be audible also.

function preload(){
  this.load.audio('music', ['music.mp3'])
}

function create(){
  const someMusic = this.sound.add('music')
  someMusic.play({ loop: true })
}

Additional Information

This reproduces on https://adidasbaseballsnextlevel.com/ This does NOT seem to reproduce with the Phaser 2.13.3 music example: https://phaser.io/examples/v2/audio/play-music

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 18 (1 by maintainers)

Commits related to this issue

The `WebAudioSoundManager.onFocus` method will now test to see if the state of the `AudioContext` is `interrupted`, as happens on iOS when leaving the page, and then resumes the context. Fix #5390 #51... — committed to phaserjs/phaser by photonstorm 3 years ago

Most upvoted comments

Mine does work. Here’s what I do:

First, I use my own audioContext, which I create before the new Phaser.Game call:

var audioContext = new ((<any>window).AudioContext || (<any>window).webkitAudioContext)();

Then, in the config, I specify this audioContext: *** in config: *** audio: { context: audioContext },

Then, I use these call for blur and focus:

window.addEventListener(“blur”, function(event) { audioContext = game.sound.context; if (audioContext.state===‘running’ && UrlUtil.isSafariOrIOS(game.scene.getScene(‘Main’))) { console.log(‘suspending audio’); audioContext.suspend(); } }, false);

window.addEventListener(“focus”, function(event) {

setTimeout(function(){ audioContext = game.sound.context; if (audioContext.state===‘suspended’ && UrlUtil.isSafariOrIOS(game.scene.getScene(‘Main’))) { console.log(‘resuming audio’) audioContext.resume(); } }, 500); }, false);

paulsymphony on Jan 27, 2020

I was googling for an hour, stumbled upon this issue. I just couldn’t figure out why my iPhone audio wasn’t working with Phaser. I even cloned the repo, built it and tested out the new version. Nothing worked. Turns out the phone was silent because of the physical silence switch 🤦.

ubershmekel on Apr 24, 2021