Audio is not resuming to play after visibilityChange in iPhone browsers (works on Android and desktop)

Questions
1

Hi all,

I have a Babylon JS application where I play some audio on load (after user interacts with the page). I want to pause the audio when the user switches to a different tab or a different application. I have some code to mute/unmute on “visibilitychange” event. Things work as expected on Android and Desktop, but for some reason fails work on iPhone browsers (tried Safari and Chrome). The audio mutes as expected when user minimizes the browser, but does not resume when the user opens the application back.

Steps to reproduce

  1. Load https://playground.babylonjs.com/#PCY1J#543 - on desktop or android browser
  2. Click on the page and see that the audio starts playing
  3. Switch to a different page and note that the audio gets muted
  4. Open the page again and note that the audio is unmuted

Repeat the same steps on a browser on iOS and notice that on step #4, audio does not resume.

Thanks,
yyyypppp

2

Hello and welcome!

iOS Safari?

3

cc @docEdub

4

Thanks for the report. I’m investigating.

5

I do not reproduce the issue when switching between Safari tabs on my iPhone with iOS 17.7, but I do reproduce the issue when switching between apps. iOS Safari interrupts the audio context when switching apps and is requiring another user interaction to unlock the audio context after switching back to Safari. Audio resumes correctly after tapping the screen. I’m not sure there’s anything we can do about this since it’s a decision Apple has made for iOS that is different than other systems.

1 Like
8

Found the issue. On iOS, when user minimizes the webpage, iOS is marking the audio as locked, but bubylon’s internally flag “BABYLON.Engine.audioEngine.unlocked” is still set to “true”. As a result, when user comes back, audio was not getting unlocked because babylon thinks the audio is already unlocked.

I added a call to lock audio along with setting volume to 0 on visibilityChange = hidden. iOS also required user interaction to unlock audio when user comes back to the page. So added a new click event to unlock audio. Not I have a consistent behavior between android and iOS.

1 Like
9

Cool. Glad you got it sorted out. What iOS version were you seeing this on?

1 Like