playing a list of sources in a background tab stops when the player changes (Chrome autoplay policy ?)

[gordielachance]

Hi, i'm using your (wonderful) player in a music app i'm working on.
It is basically a playlist that plays tracks and automatically skip to the next one when it is finished or has an error.

My problem is that when the tab is not active, the next track does play only if the player has NOT changed.

track A : Youtube
track B : Youtube
track C : Soundcloud
track D : Soundcloud
track E : Youtube

1. I click track A (Youtube) in the active tab. It starts to play. I go to another tab. ✔️
2. When track A (Youtube) is over, it skips to track B (Youtube again), and plays in the background tab. ✔️
3. When track B (Youtube) is over, it skips to track C (Soundcloud), and does NOT play unless I go to that tab. ❌
4. When track C (Soundcloud) is over, it skips to track D (Soundcloud), and plays in the background tab. ✔️
5. When track D (Soundcloud) is over, it skips to track E (Youtube), and does NOT play unless I go to that tab. ❌

How should I handle this ?

Whitelisting the app doesn't work either (for Chrome, chrome://settings/content/sound)

Thanks a lot.

[cookpete]

I'm curious to know if you get this problem in react-player@1.15.3 with

config={{ 
  youtube: { preload: true }, 
  soundcloud: { preload: true }
}}

This is one of the oldest problems I've had with ReactPlayer. The old preload config was a hacky way to try and get around this problem, but modern browsers with sophisticated autoplay policies made it very buggy and difficult to maintain.

If you still want to use react-player@2, you could try and emulate the old preload behaviour with a silent player for each type of track, that you somehow get the user to interact with. This might "prime" the tab so that any subsequent players would autoplay in the background. It is a bit of a pain though, for sure.

[gordielachance]

Hi, thanks for your reply.
I'll have a look. Here's a demo of the app i'm working on.

[cookpete]

Looks good! Very similar to an old (dead) project of mine, and the original reason I created ReactPlayer –  https://github.com/cookpete/rplayr

[gordielachance]

Okay ! That is funny !
My idea came from the amazing (and now dead too) Tomahawk player.
I have also written a Ruby API to extract tracklists.
I'll have a look at your code, since I had some troubles handling a playlist (skip songs, etc). Wonder how you did that.
I think I have something working now, but will have to test it deeply.
Thanks for your help !

PS if by any chance you were interested in being involved in my project, tell me :)

[gordielachance]

• https://bugs.chromium.org/p/chromium/issues/detail?id=1244074
• https://stackoverflow.com/questions/68954086/autoplay-fails-if-the-player-is-switched-in-a-background-tab-browsers-autoplay

[gordielachance]

@cookpete : maybe a good news, the bug has been assigned at Chromium ! Let’s keep a look at this!

[gordielachance]

This has been fixed by the Chromium team. Will be shipped with Chrome 96 (planned for the 16th November 2021)

[gordielachance]

I filled a bug report for Firefox too.

[gordielachance]

Fixed in Firefox 96, stable release planned for 2022-01-11 !