 Hey, do you know how to create a rich media playback experience on the web outside of a browser? I'm Francois Beaufort, and in this short video, I'm going to show you how to customize the Media Control Center of your operating system from a web app and even add support for hardware media keys. All you need is love, but you'll also need Media Session. Media Session is a standard web API, which allows your web app to tell the browser more about the current state of media playback within your page. And before you ask, yes, this API is supported in Chrome, Edge, Firefox, and Safari. Your web app can tell the browser through Media Session things like the current play state or the duration of your playing media content. It can also provide an artwork image for the current playback. And it can even tell the browser your web app knows how to handle specific media user actions like Next Track and Previous Track. All the information you provide will then be presented outside of a browser window itself and deeply integrated into the operating system through the Media Control Center, Notifications, Widgets, and Hardware Media Keys. It is a super convenient way for users to quickly see and control the media playing at the moment without having to search for the tab. For instance, let's say I'm listening to a podcast on the web while my device screen is locked. With Media Session, I could still hit the seek backward icon from the lock screen media controls so that the web app moves playback time backward by a few seconds. Now, let's have a look at some code to understand what is actually needed. First, to let the user know what is currently playing, set the Media Sessions metadata attribute to a new media metadata object that contains some title, artist, album, and artwork image values. Then, to let the user control what is currently playing, set some action handlers to tell the browser your web app knows how to handle that. For the sake of this example, we'll handle only the play, pause, and seek to actions. Call set action handler with the name of the action and a function that will be executed when the user triggers the action outside of a browser. It can be done by pressing the play, pause, media key on a keyboard, for instance. I recommend using try catch here, as some action may not be supported by the browser. Then, we need to make sure the Media Session state is updated accurately as the media element playback state changes. First, let's have a function called updateMediaSessionState that sets the Media Session playback state property to either the string, pause, or play, depending on the Media Elements playback state change. Then, call Media Sessions setPositionState with the Media Elements duration, playback rate, and current time. Finally, add an event listener for playing, pause, duration change, rate change, and time change that calls our custom function. And that's it. Hopefully, I've convinced you that now is a good time to add support for Media Session. Users will thank you for the resulting improved media playback experience. Check out my article in the description for more function about the API and some samples to play with. See you next time.