0

MediaSession.setPositionState() not showing the audio time, also seekbar not showing as expected.

const audio= document.querySelector('audio');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: audio.duration,
      playbackRate: audio.playbackRate,
      position: audio.currentTime,
    });
  }
}

await audio.play();
updatePositionState();

navigator.mediaSession.setActionHandler('seekto', (details) => {
  updatePositionState();
});

enter image description here

Mohammad Reza Mrg
  • 1,552
  • 15
  • 30

1 Answers1

0

I encountered the same thing.

Then I was doing some cleaning up and decided that the below was not required for now:

navigator.mediaSession.setActionHandler("seekbackward", (data) => {
        console.log('seekBackward: data: ', data);
        // seekBackward: data: { action: 'seekbackward' }
      });
      navigator.mediaSession.setActionHandler("seekforward", (data) => {
        console.log('seekForward: data: ', data);
        // seekForward: data:  {action: 'seekforward'}
      });

Once I had commented this out, the seek bar was now visible on my Mobile Device. On the desktop it was still not visible. I suspect that maybe the way the MediaSession API works is if you have the skip forward and backward buttons, then the seekTo is disabled.

Now, the seekTo bar is visible and can be triggered but it is incorrect. When a track starts, it's already a quarter of the way through.

I can't seem to find a way to set the runtime of the track in the MedaSession API on a stream.

I had read somewhere that it was not possible to even have a seek bar on a stream. ‍♀️

fromage9747
  • 344
  • 2
  • 9