Javascript DOM HTML Audio mediaGroup Property get

Introduction

Set the media group for 2 <audio> elements:

View in separate window 

<!DOCTYPE html> 
<html> 
<body> 

<audio id="myAudio1" controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>//from ww w  . ja  v a2 s  .c  o m

<audio id="myAudio2" controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio><br>
<p id="demo"></p>
<button onclick="setMedGroup()" type="button">Set media group for audios</button>
<button onclick="getMedGroup()" type="button">Get media group for audios</button>

<script>
var x = document.getElementById("myAudio1");
var y = document.getElementById("myAudio2");

function setMedGroup() { 
  x.mediaGroup = "test";
  y.mediaGroup = "test";
} 

function getMedGroup() { 
  document.getElementById("demo").innerHTML = 
     "Audio 1 media group: " + 
     x.mediaGroup + 
     ". Audio 2 media group: " + 
     y.mediaGroup;
} 
</script> 

</body> 
</html>

The mediaGroup property sets or gets the name of the media group where the audio is from.

A media group can synchronize more than one <audio> elements.




PreviousNext

Related