HTML DOM Audio mediaGroup Property

Last Updated : 22 Jun, 2023

The Audio mediaGroup property is used for setting or returning the name of the media group the audio is a part of. Two or more <audio> elements can be synchronized together using a media group.

Syntax:

Return the mediaGroup property:

audioObject.mediaGroup

Set the mediaGroup property:

audioObject.mediaGroup = group

Note: This property has been DEPRECATED and is no longer recommended.

Property Value:

group: It is used to specify the media group of the video.

Return: The Audio mediaGroup property returns a string that represents the media group of the audio.

The below program illustrates the Audio mediaGroup Property:

Example: Setting the media group for 2 <audio> elements.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Audio mediaGroup Property
    </title>
</head>
 
<body style="text-align: center">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2 style="font-family: Impact">
        Audio mediaGroup Property
    </h2>
    <br>
    <audio id="Test_Audio1" controls>
        <source src="sample1.ogg" type="audio/ogg">
        <source src="sample1.mp3" type="audio/mpeg">
    </audio>
    <audio id="Test_Audio2" controls>
        <source src="sample2.ogg" type="audio/ogg">
        <source src="sample2.mp3" type="audio/mpeg">
    </audio>
    <p>
        For setting the media group on the videos,
        double click the "Set mediaGroup" button.
      </p>
    <p>
        For returning the mediaGroup of the video,
        double click the "Return mediaGroup" button.
      </p>
    <br>
    <button ondblclick="set()" type="button">
        Set mediaGroup
    </button>
    <button ondblclick="get()" type="button">
        Return mediaGroup
    </button>
 
    <script>
        let v1 = document.getElementById("Test_Audio1");
        let v2 = document.getElementById("Test_Audio2");
        function set() {
            v1.mediaGroup = "Track 1";
            v2.mediaGroup = "Track 2";
        }
        function get() {
            alert("Media group of Video 1 is : " + v1.mediaGroup +
                ". Media group of Video 2 is : " + v2.mediaGroup);
        }
    </script>
</body>
</html>