Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Howler gets in interrupted state after minimized and opened again iOS #1702

Open
asenvolev opened this issue Jan 22, 2024 · 1 comment
Open
Labels

Comments

@asenvolev
Copy link

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

@asenvolev asenvolev added the bug label Jan 22, 2024
@caleb531
Copy link

caleb531 commented Aug 4, 2024

@asenvolev For what it's worth, I can confirm that #1660 fixes the issue, because after installing @keiththomas1's fork with that fix, my issue is completely resolved:

npm install -S https://github.com/keiththomas1/howler.js.git#master

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants