html - how can i show media controls for my music player website in the notification tray using javascript/Jquery?

Question

As you know from the title that I want to customize the notification for my music player website. default chrome notification only contains play/pause button. is there any way I can customize it to add buttons like next/previous or my own custom buttons.

I would like to implement javascript or Jquery for this.

Here is the website I am talking about.

Notification bar on mobile such as:

Thank You for any of your support.

Answer 1

I think the API you are looking for is the Media Session API. If you register the handlers for the appropriate actions the browser should display buttons which trigger those handlers.

navigator.mediaSession.setActionHandler('previoustrack', () => {
    // Whatever you need to do to play the previous track.
});
navigator.mediaSession.setActionHandler('nexttrack', () => {
    // Whatever you need to do to play the next track.
});