Audio playlist failing when iOS app in background mode

Ionic Framework
#1

This topic pertains to an Ionic Capacitor audio player app that plays sequences (playlists) of mp3 files pulled / streamed from Google Cloud Storage.

  • main problem: on an iOS device, (eg. 15.4.1) when the app is in the background or the device is locked, the code responsible to get the next track url executes, but the stream does not play. Errors like the following appear in Xcode:
    • ProcessAssertion: Failed to acquire RBS assertion ‘WebKit Media Playback’
    • originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions
  • when the app is in the foreground the audio streams, audio ads play, and transitions between audio tracks all work correctly
  • we have not discovered a way to work around these errors
  • our player is OpenPlayerJS, chosen because it was JavaScript/HTML, was actively being worked on, and supported standard ad formats
  • we have not found a Capacitor plugin player that seems robust and would solve this issue; possibly native-audio, but this plugin does not support streaming and seems to have other limitations
  • research has shown that audio apps are permitted to play in background according to apple (we have enabled this in Xcode)
  • research has also shown that this is a fairly common / persistent issue: 198277 – Audio stops playing when standalone web app is no longer in foreground

Our goal is to have an Ionic / Capacitor app that plays sequences of audio files even when the app is in background mode or the device is locked. Many common apps do this of course, like Spotify, podcasters, etc, but perhaps they are all native apps or they wrote their own proprietary Cordova / Capacitor plugin?

Ionic:

Ionic CLI : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli)

Ionic Framework : @ionic/angular 6.0.11

@angular-devkit/build-angular : 13.2.6

@angular-devkit/schematics : 13.3.1

@angular/cli : 13.2.6

@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.4.3

@capacitor/android : 3.4.3

@capacitor/core : 3.4.3

@capacitor/ios : 3.4.3

Utility:

cordova-res : 0.15.4

native-run : 1.5.0

System:

NodeJS : v17.8.0 (/usr/local/bin/node)

npm : 8.5.5

OS : macOS Monterey

#2

I’m thinking that I’ll need to create a custom Capacitor plugin to work around this issue by accessing the native iOS AVQueuePlayer. HTML5 is great because no plugin, framework, etc. is needed, but in this case it appears a plugin is needed. I have found this and will check it out: capacitor-plugin-playlist/README.md at main · phiamo/capacitor-plugin-playlist · GitHub

#3

Hi @sinbadthesailor I have the exact same issue and would love to know if you solved it or how you ended up handling the issue?

#4

@emil1818 - I’ve confirmed that the capacitor-plugin-playlist (link above) provides the ability to play a playlist when the app is in background mode.

#5

@sinbadthesailor alright, thanks.
I’m going to give it a shot as well. Did you implement it successfully?
Any issues with media controls on iOS or Android? I have noticed that issues with these also somewhat varies depending on the audio player.

Have been using howler until now, but I suppose I will have to change that entirely to use the capacitor playlists plugin.

#6

@emil1818 yup, success with iOS, haven’t tested with Android yet. Review the set of issues here to get a sense of things others have encountered. iOS media controls all work properly in our experience. We abandoned our initial player (OpenPlayerJS) due to a project requirement for background mode playback.

1 Like