Audio object property mediaGroup in Javascript

The audio object property mediaGroup used to set and retrieve the name of the media group that represents the part of the audio. It allows 2 or more audio elements to be kept synchronized. It returns a string that represents the media group of the audio.

Syntax

 1 <audio>.mediaGroup // to retrieve
 2 <audio>.mediaGroup = <group> // to set

audio : A audio element object to set and retrieve mediaGroup property

group : It specifies the media group of the audio

Audio property mediaGroup

 1 <html>
 2 <style>
 3   .container {
 4     margin: 10px 0;
 5   }  
 6 </style>
 7 <body>
 8 	<h1>The Audio Object</h1>
 9 	<h2>Example</h2>
 10 	
 11 	<div>
 12 	  <audio id="audio1" controls loop >
 13 	    <source src="audio.mp3" type="audio/mpeg">
 14 	    Your browser does not support the audio tag.
 15 	  </audio>
 16 	  <audio id="audio2" controls loop >
 17 	    <source src="audio.mp3" type="audio/mpeg">
 18 	    Your browser does not support the audio tag.
 19 	  </audio>
 20 	</div>
 21 	<p>	  
 22 	  <button onclick="access()">Access</button>
 23 	</p>
 24 	<p id="result"></p>
 25 	
 26 	<script>
 27 	const audio1 = document.getElementById("audio1");
 28 	const audio2 = document.getElementById("audio2");
 29 	audio1.mediaGroup = "audio";
 30 	audio2.mediaGroup = "audio";
 31 	function access() {	  
 32 	  const str = `Audio media group is : <b>${audio1.mediaGroup}</b>`;
 33 	  document.getElementById("result").innerHTML = str;
 34 	}
 35 	</script>
 36 </body>
 37 </html>