HTML | DOM onvolumechange Event

Last Updated : 04 Mar, 2022

The onvolumechange event in HTML DOM occurs when the media volume is changed. Use volume property to set/return the volume of the media.
This event is invoked by:

Volume increasing/decreasing
Muting/unmuting the media player

Supported Tags

Syntax:

In HTML:

<element onvolumechange="myScript">

In JavaScript:

object.onvolumechange = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("volumechange", myScript);

Example: Using the addEventListener() method

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
      HTML DOM onvolumechange Event
  </title>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onvolumechange Event</h2>
 
        <video controls id="videoID">
            <source src="GFG.mp4" type="video/mp4">
        </video>
 
    </center>
    <script>
        document.getElementById(
          "videoID").addEventListener("volumechange", GFGfun);
 
        function GFGfun() {
            alert("Volume changed");
        }
    </script>
 
</body>
 
</html>