javascripthtmljqueryhtml5-audioaudio-player

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


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:

enter image description here Thank You for any of your support.


Solution

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