8

How to Enable or Disable Global Media Controls in Google Chrome

see "Global Media Controls"

  1. Go to chrome://flags/#global-media-controls
  2. Set "Enabled"
  3. Click button "Relaunch"

How to customize (bacground image, action on click) Global Media Controls in Google Chrome

Example:

if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
        title: "TITLE",
        artist: "ARTIST",
        album: "ALBUM",
        artwork: [{
            sizes: "320x180",// <- MUST BE EXACTLY!
            src: "https://i.ytimg.com/vi/yAruCvT7P7Y/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAfHWw5BHrQugGsdPYy4eIXcqMTnQ",
            type: ""
        }]
    });

    navigator.mediaSession.setActionHandler('play', function () { });
    navigator.mediaSession.setActionHandler('pause', function () { });
    navigator.mediaSession.setActionHandler('seekbackward', function () { });
    navigator.mediaSession.setActionHandler('seekforward', function () { });
    navigator.mediaSession.setActionHandler('previoustrack', function () { });
    navigator.mediaSession.setActionHandler('nexttrack', function () { });
}
Adrosar
  • 81
  • 2
  • 3
    Please post this as a question -> answer format as Stack Overflow provides. As it's written now it has no question body, just an answer posing as question. Questions and answers are different here. The part you posted here is the question. Then below you can self answer and self accept the answer. – Tschallacka Feb 04 '20 at 12:19

1 Answers1

1

As far as I can tell, Chrome uses the mediaSession metadata only if it already detects a media stream from that page. For example, you can navigate to a YouTube video, enter what you wrote in the developer console, and the updated info will show up in the Global Media Controls. Doing the same thing on StackOverflow will not result in a new pane showing up in the Global Media Controls.

Now that this is cleared up, doing this in a Google Chrome extension is straightforward: you inject a content script that sets the metadata session object.

Métoule
  • 13,062
  • 2
  • 56
  • 84