Web API Media Session

Last Updated : 04 Dec, 2023

Web API Media Session is a powerful JavaScript feature that allows web developers to take control of media playback within their applications. By using it you can customize media notifications. It provides different actions by which you can control media playback and provide its metadata.

Web API Interfaces

MediaMetadata: It is used to give rich media metadata to a web page so it may be displayed in a platform user interface.
MediaSession: It gives a web page the ability to offer unique behaviors for common media playback interactions.

Web API Properties

Navigator: mediaSession property: It returns a MediaSession object and by using that object you can set MediaMetadata and handle different actions like play, pause, etc

Example: In this example, we will see the example of MediaMetadata and MediaSession.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Media Session Example</title>
    <style>
        section {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
 
        h1 {
            color: green;
        }
 
        h2 {
            color: crimson;
        }
    </style>
</head>
 
<body>
    <section>
        <h1>
          GeeksForGeeks | Media Session Example
          </h1>
 
        <!-- Audio Tag for Media Playback -->
        <audio id="myAudio" controls>
            <source
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004192519/SoundHelix-Song-3-(1).mp3"
            type="audio/mp3">
            Your browser does not support the audio Tag.
        </audio>
 
        <!-- Section for Displaying Actions -->
        <h2>Actions:</h2>
        <h3 id="actions"></h3>
    </section>
 
    <script>
        // Get the element where actions will be displayed
        let actions = document.getElementById('actions');
 
        // Check if MediaSession is supported
        if ('mediaSession' in navigator) {
            // Associate MediaSession with the audio element
            navigator.mediaSession.metadata = new MediaMetadata({
                title: 'Geeks For Geeks',
                artist: 'Geeks For Geeks',
                album: 'Geeks For Geeks',
                artwork: [
                    { src: 'https://media.geeksforgeeks.org/gfg-gg-logo.svg', 
                     sizes: '192x192', type: 'image/jpg' },
                    { src: 'https://media.geeksforgeeks.org/gfg-gg-logo.svg', 
                     sizes: '384x384', type: 'image/jpg' },
                ],
            });
 
            // Define action handlers for play, pause etc..
            navigator.mediaSession.
            setActionHandler('play', function () {
                actions.innerText = "Clicked on Play button";
            });
 
            navigator.mediaSession.
            setActionHandler('pause', function () {
                actions.innerText = "Clicked on Pause button";
            });
 
            navigator.mediaSession.
            setActionHandler('nexttrack', function () {
                actions.innerText = "Clicked on Next Track button";
            });
 
            navigator.mediaSession.
            setActionHandler("previoustrack", () => {
                actions.innerText = "Clicked on Previous Track button";
            });
 
            navigator.mediaSession.
            setActionHandler("seekforward", () => {
                actions.innerText = "Clicked on Forward button";
            });
 
            navigator.mediaSession.
            setActionHandler("seekbackward", () => {
                actions.innerText = "Clicked on Backward button";
            });
 
        } else {
            // Alert if MediaSession is not supported
            alert('MediaSession is not supported in this browser.');
        }
    </script>
</body>
 
</html>