Is it possible to create a browser based html/javascript audio player, that handles most of the MPRIS commands?

Question

I am trying to create a music player, that can handle most of the MPRIS commands.

During youtube is playing, playerctl list the firefox player (firefox.instance{id}), and if it has playlist then I can skip to previous / next item using $ playerctl -p firefox.instance{id} next. This works in chrome too.

I want to implement the same behavior in a React.js application, but first I'm looking for a html/javascript based solution.

One of my guesses that this is impossible (without using a browser add-on), because firefox implements this manually for each supported website.

Maybe I did something wrong, but no matter what I search for I couldn't find any information about this.

Thanks for reading / commenting!

Answer 1

Media Session API seems to solve this problem pretty well: https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API

This event listener runs every time $ playerctl -p firefox.instance{id} next is run (or when any other MPRIS client calls 'next', like KDE connect on android):

  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });

It even works in chrome (except the skipad event). More information can be found on the MDN Web Docs 'Media Session API' page I linked above.