Audio Player

Quickplay Player supports audio playback, providing a seamless listening experience. It include background playback, playlist, offline playback, and Android Auto support.

Android Setup Prerequisites

Complete the following steps to enable audio playback on Android devices.

1) Configure AndroidManifest

Add the required permissions at the manifest root level and define the service within the <application> tag in app/src/main/AndroidManifest.xml.

<manifest>
  <!-- Permissions (root level) -->
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />

  <application>
    <!-- Service (inside application) -->
    <service
        android:name=".<NameOfYourService>"
        android:enabled="true"
        android:exported="true"
        android:foregroundServiceType="mediaPlayback">
      <intent-filter>
        <action android:name="androidx.media3.session.MediaLibraryService"/>
        <action android:name="android.media.browse.MediaBrowserService"/>
      </intent-filter>
    </service>
  </application>
</manifest>

• Replace NameOfYourService with your custom service class name if you're extending AudioContentLibraryService. Otherwise, use the default AudioContentLibraryService provided by the SDK.

2) Initialize Audio Service on App Launch

Start the audio service as early as possible in your application lifecycle, ideally in your JavaScript entry point or root component.

// App bootstrap (e.g., App.tsx)
import { useEffect } from 'react';
import { audioService } from '@quickplay/rn-qp-nxg-player';

export default function App() {
  useEffect(() => {
    audioService.startAudioService();
  }, []);
  // ...existing app code...
}

3) Implement Process Cleanup

Terminate the process in onTaskRemoved() to ensure proper app shutdown when the user removes it from the Recent Apps list.

class NameOfYourService : AudioContentLibraryService() {
  override fun onTaskRemoved(rootIntent: Intent?) {
      android.os.Process.killProcess(android.os.Process.myPid())
  }
}

Important Notes:

• Avoid setting FLAG_STOP_WITH_TASK in the manifest, as it prevents onTaskRemoved() from being invoked.
• This behavior affects multiple Android versions and is a known platform-level limitation.

Player Initialization

import { createPlayer, PlayerConfig } from '@quickplay/rn-qp-nxg-player';

const playerListener = {
   onStateChanged: (playbackState, bufferingState, seekingState) => {
    console.log('Player state:', playbackState);
  },
  ...
  // Add other listeners
}
const mediaMetadata: Record<AndroidMediaMetadataKeys, string> | Record<iOSMediaMetaDataKeys, string> = {
  TITLE: "Sample Title",
  ARTIST: "Sample Artist",
  DISPLAY_SUBTITLE: "Sample Subtitle",
  ALBUM: "Sample Album",
  DURATION: "300000", // Duration is required and must be specified in milliseconds (ms)
  ARTWORK_URL: "https://example.com/artwork.jpg"
};

let playerConfig: PlayerConfig = { 
  // ...existing config...
  mediaURL: 'https://example.com/audio.mp3', // Initial audio track URL.
  mediaType: 'OTHER', //Use OTHER for MP3.
  mediaMetadata: mediaMetadata, // Update lock screen display with current media information
  useCustomPlayerControls: false, // Use native controls.
  isAudioContent: true,
  // ...existing config...
};

let player = await createPlayer(playerConfig);

Important Notes:

• For MP3 content, set mediaType to 'OTHERS' and enable isAudioContent = true for Android only.

Configure Lock Screen Metadata for iOS

await player.setPlayerPreference({
  assignRemoteActions: true, // Enable lock screen controls and remote command handling
  remoteStopAction: RemoteStopAction.PAUSE, // Pause playback when stop button is pressed
});

// Define metadata to display on the lock screen
const playingInfo: PlayingInfo = {
  assetUrl: 'mediaURL',
  mediaType: 'mediaType',
  title:  'Title',
  artist: 'Artist',
};
let image = 'some-image'
// Update lock screen display with current media information
await player.setNowPlayingInfo(playingInfo);
// To display the artwork image in lock screen controls, use:
await player.setNowPlayingArtworkImage(image)

Configure Lock Screen Metadata for Android

// To refresh the lock screen media metadata with the latest media details for the newly added list
player.updateMediaMetadata(mediaMetadata);

Attach Player Listener

player.addListener(playerListener);