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.
});