I use the react-player module in a React music app i'm working on.
My app has a music playlist. When a track has finished playing, it goes to the next one automatically.
Problem is, when the browser tab do not have the focus (background tab), it doesn't play the next track since it seems to be blocked by the browser's autoplay policy (have tested with Chrome & Firefox).
See documentation here: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
I was suggested to turn on autoplay for particular websites (for Chrome, go to chrome://settings/content/sound); but it doesn't work either. Anyway, this is not a solution for my visitors.
I've been struggling with this problems for days; any ideas on how achieve this ?
- I have multiple providers (Youtube, Soundcloud, ...) so player does not always play things from the same service.
- I'm able to detect the visibility of the tab using the Page Visibility API.
- In my console, I can see that the onready event of react-player is fired; but the player is "stuck" until I go back to the tab again - then it plays.
Here's a pastebin of the current code of my player. The function responsible for getting the source to play is
const resolveTracks = async(track,source,backwards) => {
...
}
Thanks!
