<!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
>