Cordova Media Player & iOS Now Playing (Lock screen)

Hi all.

I am using the ‘cordova-plugin-media’ to play a remote audio stream. It is working fine within my iOS app (running on my actual phone).

What is not working though is the now playing widget / display when I put the app in the background. See attached for an example.

Has anyone had experience in getting this working? I’ve searched and searched around Cordova, but cannot find anything that references this.

Did you enable background audio services in Xcode?

Hi. Yes I did. The audio plays in the background fine.

I just don’t know how to display the info or link to the media controls to the widget.

In my app I used the HTML5 audio element to display a title in the lockscreen widget.

var audio = new Audio();
audio.setAttribute('title', 'title string');

I found that I didn’t need to use a Cordova plugin for stream playback; It worked fine enough in HTML5.

This is the end result. Unfortunately, at the time of developing the app, I didn’t have the knowledge of how to set the album art for HTML audio.

This is super helpful. I’ve clearly been over-complicating what I’ve been trying to achieve.

Very happy to report it is working, as simple as that. Again, many thanks!

export function Play() {
var audio = new Audio('https://mydomain.com/live');
audio.setAttribute('title', 'My Station');
audio.play();
}
1 Like

I’m thinking (if I get some spare time) I might update my app to also provide album artwork… This SO answer looks like it might provide the right method: https://stackoverflow.com/a/59439048/3026149

Using the example you gave, (audio.setAttribute), I added the artist and album attributes but didnt see any changes in the meta on the iPhone.

I’m using the React version of F7. I’ve managed to get this function working without error, but the meta doesnt appear to be passing to the iPhone lock screen.

export function UpdateMetadata() {
if ('mediaSession' in navigator) { //execute your code  
    window.MediaMetadata.metadata = new MediaMetadata({
        title: 'Unknown',
        artist: 'Unknown2',
        album: 'Unknown3'
    })
    alert('Loaded')
} else {
    console.log('MediaMetadata is not supported')
}

}

According to this, support across browsers is quite low atm. https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata

Ive rolled back to use the cordova-plugin-media plug in to play my media.

I also added https://www.npmjs.com/package/cordova-plugin-music-controls and can now set title, artist, album and artwork to the lock screen how playing controls.

1 Like

Can you copy the code. I can’t make it work.
Thanks

Hello there,

Can you tell me how did you manage to get your audio’s metadata ?
Did you use a plugin or something ? All the plugins I’ve checked out seem outdated or the steps to make them work aren’t very clear…
Thanks