onvolumechange Event

DOM Events Event Object

Definition and Usage

The onvolumechange event occurs each time the volume of video/audio is changed.

This event is triggered by the following situations:

  • Increase or decrease the volume
  • Mute or unmute the media player

Tip:Please use the audio/video object's volume Property to set or return the volume of audio/video.

Example

Example 1

Execute JavaScript when the video volume changes:

<video onvolumechange="myFunction()">

Try It Yourself

Example 2

Execute JavaScript when the audio volume changes:

<audio onvolumechange="myFunction()">

Try It Yourself

Example 3

Use the volume property to set the volume:

document.getElementById("myVideo").volume = 0.2;

Try It Yourself

Syntax

In HTML:

<element onvolumechange="myScript">

Try It Yourself

In JavaScript:

object.onvolumechange = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("volumechange", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() Method.

Technical Details

Bubbling: Not Supported
Cancelable: Not Supported
Event Types: Event
Supported HTML Tags: <audio> and <video>
DOM Version: Level 3 Events

Browser Support

The numbers in the table indicate the first browser version that fully supports the event.

Events Chrome IE Firefox Safari Opera
onvolumechange Support 9.0 Support Support Support
DOM Events Event Object