MediaSession API music controllers not showing on mobile locked screens when playing an audio file (Android/Chrome and iPhone/Safari)

[Crandy9]

Documentation Is:

• [ ] Missing
• [X] Confusing
• [ ] Incorrect
• [ ] Other

Describe Issue

I have a music player powered by howlerjs in my Vuejs app. The audio source is served to dynamically created howler instances from my Django backend API. I have custom functions for my music player that calls the howler methods (play, pause, skip forward, back) within them. So the actual howler play() and pause() methods are not called in the howler onplay() and onpause() methods. Everything works good, there are no errors and the audio correctly plays in my app. However, the chrome browser for Android and Safari for iPhone do not sense that audio is playing and therefore the music controllers do not show up in the lock screens or notifications tab of the phone.

Here is an example from https://web.dev/media-session/ what I am trying to do. But according to that article, the browser should automatically pick up when an audio file is playing in the browser and display the media controls. But that is not happening in my case

How do I notify chrome and safari that an audio file is playing to display the media controls? I have no audio html tags setup in my vuejs components because I am creating a music player from the ground up using howler. Maybe that's why?

Thank you

Here is my howlerjs code:

    createHowlInstance(state , src) {
      const newHowlInstance = new Howl({
            src: [src],
            // html5: false,
            preload: true,
            xhr: {
              headers: {
                'Accept-Ranges': 'bytes'
              }
            },
            onplay: () => {

            },
            onpause: () => {

            },
            onstop: () => {

            },
            // when the song finishes playing go to next song
            onend: () => {

            },
            onloaderror: (error) => {
              console.log('error loading audio file', error)
            },
            onplayerror: (error) => {
              console.log('error playing audio file', error)
            },
      }); 
      state.howlInstance = newHowlInstance 

        if (navigator && navigator.mediaSession) {

            navigator.mediaSession.setActionHandler('play', () => {
              console.log('play')
              newHowlInstance.play();
            });
            navigator.mediaSession.setActionHandler('pause', () => {
              console.log('pause')
              newHowlInstance.pause();
            });  
        }

    },

Suggested Improvement

I tried html: true, html: false checked other related issues here

https://github.com/goldfire/howler.js/issues/1262

and here

https://github.com/goldfire/howler.js/issues/1175#issuecomment-639518966

[Sandakan]

@Crandy9 Maybe you could try setting the html5 option to true and see if this fixes the problem. I have a problem with something like this, and mediaSession works when html5 is set to true.

[bikubi]

Looks like a duplicate of my #1383

I have also a fix you might want to try https://github.com/goldfire/howler.js/pull/1530 (looks like I should follow up on that PR...)

[ranxin001]

@Crandy9 Maybe you could try setting the html5 option to true and see if this fixes the problem. I have a problem with something like this, and mediaSession works when html5 is set to true.

I`m not working

[ranxin001]

Looks like a duplicate of my #1383

I have also a fix you might want to try #1530 (looks like I should follow up on that PR...)

Too strong，That's it！