HTML onvolumechange Attribute

Last Updated : 07 Mar, 2022

The HTML onvolumechange Attribute is an event attribute that occurs when the media volume is changed. Use volume property to set/return the volume of the media. The events are invoked only when the volume is increased or decreased and mute or unmute.

Supported Tags:

Syntax:

<element onvolumechange="myScript">

Attribute Value: This attribute contains a single value script that works when onvolumechange event attribute call. This attribute is supported by <audio> and <video> tags.

Below examples illustrate the HTML onvolumechange attribute in HTML:

Example 1: In this example, we will use the onvolumechange attribute on the audio tag.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML onvolumechange Attribute
        </title>
    </head>
 
    <body>
        <center>
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h2>HTML onvolumechange Attribute</h2>
 
            <audio controls id="audioID">
                <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190625153922/frog.mp3"
                        type="audio/mpeg" />
            </audio>
        </center>
        <script>
            document.getElementById(
              "audioID").addEventListener("volumechange", GFGfun);
 
            function GFGfun() {
                alert("Volume increased");
            }
        </script>
    </body>
</html>

Output:

After :

Example 2: In this example, we will use the onvolumechange attribute on the video tag.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML onvolumechange Attribute
        </title>
    </head>
 
    <body>
        <center>
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h2>HTML onvolumechange Attribute</h2>
 
            <video controls id="videoID" width="340" height="240">
                <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190401140735/g4g2.mp4"
                        type="video/mp4" />
            </video>
        </center>
        <script>
            document.getElementById(
              "videoID").addEventListener("volumechange", GFGfun);
 
            function GFGfun() {
                alert("Volume changed");
            }
        </script>
    </body>
</html>