Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to customize Global Media Controls in Google Chrome (question and answer) [closed]

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 () { });
}
like image 224
Adrosar Avatar asked Jan 20 '20 17:01

Adrosar


1 Answers

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.

like image 175
Métoule Avatar answered Oct 01 '22 14:10

Métoule