The native app's headless audio player

When playing audio in the web audio-player, the native app is actually playing the audio, while the web-view keeps on rendering the UI. In order to the web-views UI in sync with the native app's audio player, the native app sends frequent updates to the web-view about the current playing state.

In addition, when interacting with the lock-screen UI of the phone where the native-app is playing the audio, the native-app forwords these interactions to the web-view, so that the web-view can update its UI accordingly.

Events sent from the web-view to the native app

The web-view uses postMessage to send events to the native app. The function notifyApp is used to send the events.

Example:

notifyApp(AudioEvent.SETUP_TRACK, {
  item,
  autoPlay,
  initialTime,
  playbackRate,
  coverImage: item.document.meta.coverForNativeApp,
})

Events

Events received in the webview, sent from the native-app

In order to receive events from the native app, the react-hook useNativeAppEvent is used.

Example:

useNativeAppEvent<string>(
  AudioEvent.QUEUE_ADVANCE,
  async (itemId) => {
    const isHeadOfQueue =
      audioQueue && audioQueue.length > 0 && audioQueue[0].id === itemId
    const isActiveItem = activePlayerItem && activePlayerItem.id === itemId
    if (isHeadOfQueue || isActiveItem) {
      // HasOptedOutFromAutoPlay might be null, which should then result in 'true'
      await onQueueAdvance(isAutoPlayEnabled)
    }
  },
  [initialized, activePlayerItem, isAutoPlayEnabled],
)

Most of the communication received by the web-view is handled in the AudioPlayerController (opens in a new tab) component.

Events

Example message flow

References

• react-native-track-player (opens in a new tab)

• postMessage docs (opens in a new tab)

• react-native onMessage (opens in a new tab)