HTML | DOM onvolumechange Event
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
<!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
filter_none
Output:
Before:
After:
Supported Browsers: The browsers supported by DOM onvolumechange Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
