Event Onvolumechange

📅 2026-06-14 | 📂 JavaScript

## onvolumechange Event

Definition and Usage

The onvolumechange event occurs when the volume of a video/audio has been changed.

This event is invoked by either:

Changing the volume attribute
Muting or unmuting the audio/video

Tip

This event is commonly used on video playback control pages.

Browser Support

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

Event	Chrome	IE	Firefox	Safari	Opera
onvolumechange	Yes	Yes	Yes	Yes	Yes

Syntax

HTML:

<audio onvolumechange="myScript">
...</audio>
<video onvolumechange="myScript">
...</video>

JavaScript:

<script>
// Audio object
 var x = document.getElementById("myAudio");
x.onvolumechange= function(){myScript()};

// Video object
 var x = document.getElementById("myVideo");
x.onvolumechange= function(){myScript()};
</script>

Event Properties

Property	Description
isTrusted	Returns whether the event is trusted

Note: The event object is available in the event handler function's first parameter.

More Examples

Example

Here we use onvolumechange to display the current volume of the audio/video when it has been changed:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<audio id="myAudio" controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<p>Click the controls to change the volume.</p>

<script>
document.getElementById("myAudio").onvolumechange = function() {
    var x = document.getElementById("myAudio").volume;
    // Display the current volume
    alert("Current volume: " + x);
};
</script>

</body>
</html>

HTML DOM reference: audio/volume property

YouTip