React-native-track-player: [Only in IOS background Mode] not able to fetch next song from server after `playback-queue-ended` in IOS background mode

[dineshucreate]

Hey Folks,

I am trying to fetch the next song from the server when playback-queue-ended invoked.
It's working fine with Android (both foreground and background) and IOS (only in the foreground). In the case of the IOS background, it's not working at all.
though, It's working perfectly fine with the IOS simulator.

Note: I have read somewhere in issues, that is not possible because of limited amount of time before the OS kills the app but that's not true because the same functionality is already available with one more package react-native-music-control but unfortunately I can't use it because that package is not maintained anymore and they recommended to use only this react-native-track-player package.

You're running into an issue with iOS.. once playback stops you'll have a limited amount of time before the OS kills the app. Your fetch for a new track must not be working effectively and the OS is shutting down the app. possibly the RN thread is also sleeping on you.

To Reproduce

• write code to fetch next song when playback-queue-ended
• Put your IOS App in background
• keep listening to the first song
• And when playback-queue-ended it should fetch and play next song from the server but it's failed

Environment:

 System:
    OS: macOS 10.15.2
  Binaries:
    Node: 13.5.0 - /usr/local/bin/node
    npm: 6.13.4 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2
  IDEs:
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1

What react-native-track-player version are you using?

2.0.0-rc13

Code

 TrackPlayer.addEventListener(Event.PlaybackQueueEnded, async event => {
    ----FETCH NEXT SONG FROM SERVER HERE-----
 });

[curiousdustin]

@dineshucreate , have you tried enabling the Background fetch Background Mode in Xcode under Capabilities?

I'm not positive this will help, but I use it on my app, and I am able to load info about my next track before adding and playing it.

[dineshucreate]

@curiousdustin Thanks for the reply!

Yes, I did it and still not able to fetch the next song from the server.
are you doing the same? I mean you are also fetching next song after playback-queue-ended invoked?
is it working fine for you in IOS background mode?

[curiousdustin]

Yes, I do this in 2 places in my app. When handling either playback-queue-ended, or sometimes playback-track-changed.

And yes, it fetches data from an API about where to get the next track from, then add the track, and plays it.

[curiousdustin]

Are you adding the listener as part of the service?

TrackPlayer.registerPlaybackService(() => require('./service.js'));

Within service.js, or equivalent?

[dineshucreate]

Yeah, something like this:

AppRegistry.registerComponent(appName, () => RouterComponent);
TrackPlayer.registerPlaybackService(() => TrackPlayerService);

It's working when app is in foreground and for android background too.

[dineshucreate]

@curiousdustin which version of react-native-track-player are you using?

[curiousdustin]

in production right now I am using a fork based on 1.1.8, But I don't know of any changes since then that would affect this.

[dineshucreate]

What you suggest here?
Is there anything I am missing?
@curiousdustin

[curiousdustin]

As a test, if you skip fetching the next track data from your API, and instead have some test data ready to go, and add the next track immediately (instead of waiting for fetch), does it work?

[dineshucreate]

Hey @curiousdustin
I think I am able to fetch the next song in the background but it seems TrackPlayer is not ab;e to play the song in the background.

Here is my code

          await TrackPlayer.add({
            "id": currentTrackId,
            "url": songUrl,
            "title": title,
            "artist": artist,
          });
          await TrackPlayer.play();

it seems TrackPlayer is not able to play a song when App is in the background.

Do you think I have to do it in another way?

[dineshucreate]

@curiousdustin It seems the issue is something similar to this one 220

@dcvz closed this issue by saying

This is because once you go to background and there's no audio playing. iOS kills the application.
iOS only supports playing music in background if, you go to background while playing music.

I think it's not true because it's working for @curiousdustin already :)

any suggestion?

[curiousdustin]

I am now remembering, I think I used a hack to get around this in my production app.

In that app, I add a special track that is just 5-10 seconds of silence, after my normal track.

That silence track keeps the app alive in the background while the next track is fetched.

In this case I use playback-track-changed to detect when to do this, instead of playback-queue-ended.

[curiousdustin]

Although, I do not recall if this was to solve issues on iOS or Android.

Related: https://github.com/react-native-kit/react-native-track-player/issues/818

[curiousdustin]

Another possible workaround for you @dineshucreate could be to add 2 tracks to the queue. Then, when the first one ends, load the data for the 3rd and add it. Continue in this manner, each time a track ends, load the one that should be after the next one.

[dineshucreate]

@curiousdustin
I think I have found exact issue,
iOS background app is not able to invoke TrackPlayer.stop() and Track player.reset() methods

But for me it's important because I need to reset song before add new one

[curiousdustin]

What side effect of reset() is important to you? I think this might be causing iOS to stop background tasks.

[dineshucreate]

@curiousdustin what you do if one song is already playing and you have to stop, add new song and play that song.

In my case:
Stop()
Reset()
Add({new song})
Play()

[curiousdustin]

You could try instead:

pause()
add()
skip()
play()

[dineshucreate]

Okay thanks
Let me check this

[dineshucreate]

It's not working @curiousdustin
I think it should be
stop();
add();
play();

Let me try this one!

[shuvo0074]

It's not working @curiousdustin
I think it should be
stop();
add();
play();

Let me try this one!

@dineshucreate , stop() , add(), play() didn't work for me. Did it work for you? Having the same issue for version 1.2.3

[dineshucreate]

Hey @shuvo0074

Try this one:

if ( Platform.OS === 'android' || (Platform.OS === 'ios' && (isAppActive === "active"))) {
await TrackPlayer.stop();
await TrackPlayer.reset();
}
await TrackPlayer.pause();
await TrackPlayer.add({ });
await TrackPlayer.play();

Here isAppActive is AppState from react-native

Please let me know if you need more information

Thanks