Add simple media controls to mobile device's lock screen and system tray

[CRYPTO-7CA]

Heya! First of all I am not sure if this is even technologically possible for web browsers to implement such a feature (so that it can be controlled on the OS user interface level), even though I am doing some web development projects myself I am not that experienced to know for sure.

Why should this feature be implemented?

When doing something else on the device or when the screen goes black and the device locks (the media player continues playing still) there will be a function to skip to the next/previous song from the lockscreen or in the system tray of the mobile device. A black screen conserves power and allows for longer playtime if the device is not being charged. Right now it feels more like a "missing feature" rather than a feature request.

Feature Description

I will let 2 pictures do the whole talking. Here is how I imagine this feature to be.

Although it may not be possible to implement this feature for web browsers, a minimalistic app, where URLs of favorite AmplitudeJS server hosts are saved and have these basic controls may just do the job.

[kartikcool15]

Easy Solution :

1. Create a function ..

<script type = "text/javascript" > function updatenotification() { if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: Amplitude.getActiveSongMetadata().name, artist: Amplitude.getActiveSongMetadata().artist, artwork: [{ src: Amplitude.getActiveSongMetadata().cover_art_url, sizes: '96x96', type: 'image/png' }, { src: Amplitude.getActiveSongMetadata().cover_art_url, sizes: '128x128', type: 'image/png' }, { src: Amplitude.getActiveSongMetadata().cover_art_url, sizes: '192x192', type: 'image/png' }, { src: Amplitude.getActiveSongMetadata().cover_art_url, sizes: '256x256', type: 'image/png' }, { src: Amplitude.getActiveSongMetadata().cover_art_url, sizes: '384x384', type: 'image/png' }, { src: Amplitude.getActiveSongMetadata().cover_art_url, sizes: '512x512', type: 'image/png' }, ] }); navigator.mediaSession.setActionHandler('play', function () { Amplitude.play() }); navigator.mediaSession.setActionHandler('pause', function () { Amplitude.pause() }); navigator.mediaSession.setActionHandler('previoustrack', function () { Amplitude.prev(playlistKey = null) }); navigator.mediaSession.setActionHandler('nexttrack', function () { Amplitude.next(playlistKey = null) }); } } </script>

2. Call this Function in Amplitude.init Callbacks.

Amplitude.init({
"songs": [],
"callbacks": {
'song_change': function () {
updatenotification();
},
'play': function () {
updatenotification();
}
}
});

[nicoesiea]

Hello @kartikcool15
Thank you for this solution, it was closed to works on my project, but unfortunately it does not.
Here is my code:
Amplitude.init({ continue_next: true, waveforms: { sample_rate: 10 }, songs: ninouMusicArray, callback:{ song_change: ()=>{ alert("changement de titre"); updatenotification(); }, play: ()=>{ alert("lecture"); updatenotification(); } } });

But there is no callback alert visible when I change the song

Are you able to help me in private?

Thank you

[kartikcool15]

Its Callbacks not Callback

[nicoesiea]

Super thank you very much @kartikcool15

[aaronlutze]

The above works well for displaying the song title and artwork, however, when I press prev or next, it moves 2 songs instead of 1, and, starts playing a song from my itunes library instead of one from my playlist. Any ideas on why this would be happening?