Howler gets in interrupted state after minimized and opened again iOS

[asenvolev]

The Problem

Hello there
We are using "howler": "^2.2.3" and we experience the following issue:
In a deployed Create React App there is an iframe in which our Create React App shows up. When we open this in iOS device and make a user gesture the sounds starts and works perfectly. BUT THEN when you minimize safari and open it up again the sounds are now working. Tryied to fix it like that:

const isAppOnForeground = usePageVisibility();

useEffect(() => {
howl.current?.mute(!isAppOnForeground );
if (isAppOnForeground ) {
const { ctx } = Howler;
if (ctx && !document.hidden) {
setTimeout(() => {
ctx.resume();
}, 200);
}
}
}, [isAppOnForeground ]);

but it haven't helped.

Added console logs to see the context state and it happens to be interrupted in safari and it does not start. After that i added this hoook :

import { useEffect, useState } from 'react';
import { usePageVisibility } from 'react-page-visibility';

const useUserInteraction = (): void => {

const isAppOnForeground = usePageVisibility();
const [addedEvent, setAddedEvent] = useState(false);

const unlockAudioContext = (): void => {
Howler.ctx.resume();
document.removeEventListener('click', unlockAudioContext, true);
setAddedEvent(false);
};

useEffect(() => {
if (!addedEvent) {
document.addEventListener('click', unlockAudioContext, true);
setAddedEvent(true);
}
},[isAppOnForeground]);

};

export default useUserInteraction;

Again there is no effect. Even after i added focus event listener it was not working.

Then i tried to pause all hows and suspend the audio by myslef and when the app is on foreground to resume the context and to play the hows' sounds. No effect!

After many minimizing and maximizings the music starts to play again but on the next minimizing it stops again.

Reproducible Example

No response

Reproduction Steps

get an iphone no matter which one
open safari
open a deployed CREATE REACT APP which inside its root has an iframe with another CRA with howler installed.
start playing music with howler.
minimize safari
open safari
No sounds can be heard
context state is running

Possible Solution

No response

Context

No response

Howler.js Version

v2.2.3

Affected Browser(s)/Versiuon(s)

Safari 16, Safari 17 All safaris