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
Supported Tags
- <audio>
- <video>
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> |
Output:
Before:
After:
Supported Browsers: The browsers supported by DOM onvolumechange Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
.png)