Media Control to be audio playback agnostic

[rzym-on]

Quick question: Does RNTP has a solution to use Media Control to display status and control audio playback from other library? (It's Expo AV in my situation).

If no: I want to share idea to make Media Control audio-playback-agnostic (play from other source/library, update progress and control playback using RNTP Media Control). It's something that has react-native-music-control, but it's archived and pointed to RNTP.

I read the Contribution section from README and I'm willing to write some code (or if someone with more experience has a will to do so).

How it could look like? Snippets from react-native-music-control are enough to explain this:

MusicControl.setNowPlaying({
  title: 'Billie Jean',
  artwork: 'https://i.imgur.com/e1cpwdo.png', // URL or RN's image require()
  artist: 'Michael Jackson',
  album: 'Thriller',
  genre: 'Post-disco, Rhythm and Blues, Funk, Dance-pop',
  duration: 294, // (Seconds)
  description: '', // Android Only
  color: 0xffffff, // Android Only - Notification Color
  colorized: true, // Android 8+ Only - Notification Color extracted from the artwork. Set to false to use the color property instead
  date: '1983-01-02T00:00:00Z', // Release Date (RFC 3339) - Android Only
  rating: 84, // Android Only (Boolean or Number depending on the type)
  notificationIcon: 'my_custom_icon', // Android Only (String), Android Drawable resource name for a custom notification icon
  isLiveStream: true, // iOS Only (Boolean), Show or hide Live Indicator instead of seekbar on lock screen for live streams. Default value is false.
});

MusicControl.updatePlayback({
  state: MusicControl.STATE_PLAYING, // (STATE_ERROR, STATE_STOPPED, STATE_PLAYING, STATE_PAUSED, STATE_BUFFERING)
  speed: 1, // Playback Rate
  elapsedTime: 103, // (Seconds)
  bufferedTime: 200, // Android Only (Seconds)
  volume: 10, // Android Only (Number from 0 to maxVolume) - Only used when remoteVolume is enabled
  maxVolume: 10, // Android Only (Number) - Only used when remoteVolume is enabled
  rating: MusicControl.RATING_PERCENTAGE, // Android Only (RATING_HEART, RATING_THUMBS_UP_DOWN, RATING_3_STARS, RATING_4_STARS, RATING_5_STARS, RATING_PERCENTAGE)
})

little Q&A

• Did you done some research?
  Yes. Tried to find solution for few a months and didn't find anything.
• Why don't you just use playlist and playing logic from RNTP?
  TLDR; Because of Expo AV and custom Sound object. Explanation in background story.
• Why don't you just use notifications?
  I'm using them now, and they are limited (especially on iOS) with displaying progress and controling playlist.
• Why don't you just use something to create silence.mp3 when user set duration of silence?
  I don't want to waste memory on mp3 files and adding ffmpeg libraries to my bundle to handle such situations.
• Maybe react-native-music-control?
  It's archived and can produce complications with newer versions of Android and iOS. Also maintainer pointed RNTP as the best alternative.

Background story (optional for reading)

I'm working on a meditation app where a user has playlist with audio files combined with silence blocks. User can define the duration for earch silence block and then use custom-length silence block in playlist.
I've ended up using Expo AV. I created custom soundOfSilence file that mimic default Sound class from Expo AV (I wasn't able to do so in RNTP). So far so good - it's working now, and Expo AV treats it as it's own Sound object.
Now I want to add background controls to this playlist, so user can lock phone and control "meditation flow" from the lock screen (or notification center) on Android and iOS.
I've tried to mimic play behavior using RNTP using something like this:

// Required configuration from docs

...

await TrackPlayer.add({
	id: 'silence',
	url: 'silence', // Some fake url
	title: 'Silence Block',
	artist: 'Silence',
	duration: 15 * 1000, // Custom length
});
TrackPlayer.play();

...

let counter = 0;
const mimicPlay = setInterval(() => {
	counter++;
	TrackPlayer.updateNowPlayingMetadata({
		elapsedTime: counter * 1000,
	});

	if (counter > 15) clearInterval(mimicPlay);
}, 1000);

But with no success - RNTP shows media control, but then it disappear because nothing is actually played from its perspective.

[JakubKaczuba]

This is very good idea. I'm looking for a similar solution to use in my project.

[lovegaoshi]

u should ask expo av to build their notification instead. in fact they are doing that.

theres a reason music control is archived bc its buggy. take android for example, the newest guideline is to keep notification as a foreground service. this is media3s mediaSessionService. building this requires a forwarded player from the specific audio lib. also the remote events need to be emitted back to the lib. its just easier to integrate an aio solution instead of trying to come up with a standard (which expo has a great interest in), or ending up in a buggy mess.

and ofc u r welcome to fork expo av and shove a mediaSessionService in there as well.