html5 Music Source

[NadDj]

hello,
i've been trying to make this plugin work on my app that play music from an html web source & not from the device,
when the html source is loaded to chrome on android it shows the music playing on the device lock screen,
when the same html link is opened & played from the android app nothing shows on the locked screen,
i read that The Media Session API is supported in Chrome only, so is there a way to make it work in cordova android ?
by the way it works with no issue on the IOS side,
regards

[ghenry22]

Currently this app relies on native functionality to generate the notification, remote controls, manage the audio session etc.

If you want to use use the media session stuff in Chrome, I have implemented in a browser before, not sure if it works on Android but here is my code if it helps you, you then handle the notifications pretty much the same way you do with this plugin. If you take this approach using HTML5 audio and the chrome mediasession then you don't need this plugin.

    let _coverArt: string; //http or file path to your
    
    // Browser remote controls
    if (this.store.appState.isWEB){

      if(!navigator.mediaSession){
        console.log('playerActions: browser does not supprot mediaSession')
        return;
      }

      console.log('Playeractions: browser supports media session');

      // No cache for web, always online coverart
      _coverArt = this.store.appState.coverArtBase500 + this.store.playerState.currentTrack.coverArt;
      console.log(_coverArt);

        // Set Metadata
        navigator.mediaSession.metadata = new MediaMetadata({
          title: this.store.playerState.currentTrack.title,
          artist: this.store.playerState.currentTrack.artist,
          album: this.store.playerState.currentTrack.album,
          artwork: [
            { src: _coverArt, sizes: '96x96',   type: 'image/jpeg' },
            { src: _coverArt, sizes: '128x128', type: 'image/jpeg' },
            { src: _coverArt, sizes: '192x192', type: 'image/jpeg' },
            { src: _coverArt, sizes: '256x256', type: 'image/jpeg' },
            { src: _coverArt, sizes: '384x384', type: 'image/jpeg' },
            { src: _coverArt, sizes: '512x512', type: 'image/jpeg' },
          ]
        })

        navigator.mediaSession.setActionHandler('play', (details) => {this.htmlMusicControlsEvents(details)});
        navigator.mediaSession.setActionHandler('pause', (details) => {this.htmlMusicControlsEvents(details)});
        navigator.mediaSession.setActionHandler('nexttrack', (details) => {this.htmlMusicControlsEvents(details)});
        navigator.mediaSession.setActionHandler('previoustrack', (details) => {this.htmlMusicControlsEvents(details)});
    }

[NadDj]

hey thank you very much for taking the time & explaining it, i'm not an expert on writing codes, what i can sxplain to you is that i'm using a basic cordova app to show my website where music is stored on both andriod & ios
the issue i'm facing is on android side where no notifications is shown on locked screen,
now my question to you if possible to tell me where to insert this code using android studio or if possible to share an example project will be great, i'm good on following instructions :)
note that i'm directing my app to my website using the content source link inside the config.xml file like this:
http://prntscr.com/12ih5o9
also the media session is not added to my project that's why i added your plugin
Best Regards

[ghenry22]

Install the Cordova-plugin-media and use the native audio functions together with this plugin. That will take care of everything for you.

[NadDj]

thanks man, well appreciated will try this,
can you direct me to a sample project who has the same format or how to use native audio functions in cordova project with android studio,
best regards