onvolumechange Event
Example
Call a function when the volume of a video is changed:
<video onvolumechange="myFunction()">
Try it Yourself »
More examples below.
Description
The onvolumechange event occurs when a media volume is changed.
The onvolumechange event occurs when the volume is increased og decreased.
The onvolumechange event occurs when the volume is muted or unmuted.
Audio and Video Events
While loading a media, these events occur in the following order:
| Event | Occurs When |
|---|---|
| onloadstart | The loading of a media starts |
| ondurationchange | The duration of a media is changed |
| onloadedmetadata | The meta data for a media has been loaded |
| onloadeddata | A media frame is loaded |
| onprogress | The browser is loading a media |
| oncanplay | An element's scrollbar is being scrolled |
| oncanplaythrough | The browser estimates it can play a media |
| onplay | A media starts to play |
| onplaying | A media starts or resumes |
| ontimeupdate | The indicated time is changed |
| onended | A media has reached the end |
Events that can occur while a media is loading or playing:
| Event | Occurs When |
|---|---|
| onabort | The loading of a media is aborted |
| onemptied | A media is empty (already loaded) |
| onerror | An error occurs while loading a media |
| onpause | A media is paused |
| onratechange | The playback rate is changed |
| onseeked | A user has seeked a new media position |
| onseeking | A user start seeking a new media position |
| onstalled | Media data is not available |
| onsuspend | The browser is not getting the media data |
| onvolumechange | The volume of a media is changed |
| onwaiting | A media is waiting for the next frame |
See Also:
Syntax
In JavaScript, using the addEventListener() method:
object.addEventListener("volumechange", myScript);
Try it Yourself »
Technical Details
| Bubbles: | No |
|---|---|
| Cancelable: | No |
| Event type: | Event |
| HTML tags: | <audio> and <video> |
| DOM Version: | Level 3 Events |
More Examples
Example
Call a function when the volume of an audio has been changed:
<audio onvolumechange="myFunction()">
Try it Yourself »
Example
Using the volume property to set the volume:
document.getElementById("myVideo").volume = 0.2;
Try it Yourself »
Browser Support
onvolumechange is a DOM Level 3 (2004) feature.
It is fully supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 11 |
