Related Articles

Related Articles

HTML | DOM onvolumechange Event
  • Last Updated : 27 Aug, 2019

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before:



After:

Supported Browsers: The browsers supported by DOM onvolumechange Event are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :