Description
Documentation Is:
- Missing
- 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
and here