Struggling with Music Controls

Capacitor
1

Hi all,

I am using either html5 audio or cordova-plugin-media, and I’ve tried several of the MusicControls packages.

I am currently trying “@ionic-native/music-controls” (with the cordova-plugin-music-controls2 package).

This is working perfectly well on Android, but the controls are not showing up at all on iOS :frowning:

Because I hit some snafu because the plugin used Cordova specific classes, I even tried changing classes in the native code, the controls still do not appear in the simulator, but now I can see in the logs that it is being called:

To Native Cordova ->  MusicControls updateIsPlaying MusicControls1723269100 ["options": [{
    isPlaying = 0;
}]]

I am really struggling how to proceed from here. Do anyone else use any music controls that’s working on both Android/iOS? (I’m willing to change to another plugin if that helps).

2

Okay, I actually found the answer myself. - The MusicControls do not work in the simulator on iOS - only when you run it on a real device. (weirdly enough).

Now for the next problem to research: cordova-plugin-media has no “loading status” - I would like to show a loading indicator while the file is buffering.

(Well preferably I would actually love to just use the html audio tag, but that overrules the musiccontrols with the browser one… Sigh).

3

Sorry for the late reply. You can use HTML5 Audio to play audio files on capacitor. It also supports preloading, so the file plays immediately. You can also display the media controls on iOS using MediaSession: https://developers.google.com/web/updates/2017/02/media-session
No Plugin needed. Simply init it like this:

this.player = new Audio('https://...);
this.player.play();

Sadly, the native audio control isn’t displayed on android. So you might use the media controls plugin for this platform.