Notification Bar Hidden Play/Pause Button

[GonzaloPardoVillalibre]

Hi!

I'm currently using the plugin as follows in my component:

  async initializePlayer(audioTrack: AudioTrack) {
    this.audioTrack.next(audioTrack);
    AudioPlayer.destroy({ audioId: this.trackId });

    await AudioPlayer.create({
      audioId: this.trackId,
      audioSource: this.audioTrack.getValue().audioSource,
      friendlyTitle: this.audioTrack.getValue().title,
      useForNotification: true,
      artworkSource: this.audioTrack.getValue().artworkSource,
      isBackgroundMusic: true,
      loop: false,
      showSeekForward: true,
      showSeekBackward: true,
    }).catch(ex => console.log('Error creating audio player', ex));

    await AudioPlayer.initialize({ audioId: this.trackId }).catch(ex => console.log('Error initializing audio player', ex));
    await AudioPlayer.onAudioReady({ audioId: this.trackId }, async () => { console.log('Audio Ready'); });
    await AudioPlayer.onAudioEnd({ audioId: this.trackId }, async () => { AudioPlayer.stop({ audioId: this.trackId }) });
    await AudioPlayer.onPlaybackStatusChange({ audioId: this.trackId }, result => {
      switch (result.status) {
        case 'playing':
          AudioPlayer.play({ audioId: this.trackId });
          this.isPlaying.next(true);
          this.startTimer();
          break;
        case 'paused':
          AudioPlayer.pause({ audioId: this.trackId });
          this.isPlaying.next(false);
          this.stopTimer();
          break;
        default:
          console.log('Default');
          AudioPlayer.stop({ audioId: this.trackId });
          this.isPlaying.next(false);
          this.stopTimer();
          break;
      }
    });
  }

Info.plist

    <key>UIViewControllerBasedStatusBarAppearance</key>
    <true/>
    <key>NSFaceIDUsageDescription</key>
    <string>For an easier and faster log in.</string>
    <key>UIBackgroundModes</key>
    <array>
        <string>audio</string>
    </array>

Everything works fine however, I'm experiencing a weird phenomenon on the lock screen MPRemoteCommandCenter as the play/pause button is missing! Well, not actually as when I tap there it stop/resumes the track... but the look and feel is transparent? (I'm not really sure what is going on as this is my first app on IOS).

Im reproducing this same behaviour in several simulators:

• Iphone 15 IOS 17.4
• Iphone 16 IOS 18.2

Is it maybe on the style of my app? I'm a bit lost :S

Thank you so much in advance! :)
cc: @wsamoht

[wsamoht]

A couple of things (maybe unrelated) first.

• Audio should be either useForNotification or isBackgroundMusic not both
• You need to register the callbacks onAudioReady, onAudioEnd, etc. before calling initialize
• If you are just changing audio, instead of destroying the instance, you could use changeAudioSource and changeMetadata.

There is example code over here - https://github.com/mediagrid/capacitor-native-audio/blob/main/example/src/js/example.ts

Specifically to your issue, I have seen these weird issues with the simulator. That is one of the reasons why there is some wacky code to force an update to the controls when it shouldn't need to be done...lol.

I think these issues are specific to the simulator as I haven't heard of anyone having issues on a real iPhone. I unfortunately don't own any Apple products so I cannot test a real device.

[GonzaloPardoVillalibre]

Hi @wsamoht,

Thank you so much for the tips, I've tried to follow the exact same example in the past but made some mistakes :)... those tips were very helpful.

I understand, the moment I'll be close to finish my app I'll buy myself an apple developer license to install it on a real device, will come back to this thread and confirm that the issue reproduces on the simulator only.

Thank you again, your work is amazing.