Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script each time the volume of a video/audio is changed in HTML?
The onvolumechange attribute fires when the user changes the volume of a video or audio element. This event triggers for any volume modification including volume up, volume down, mute, or unmute operations.
Syntax
Following is the syntax for using the onvolumechange attribute −
<video onvolumechange="functionName()">...</video> <audio onvolumechange="functionName()">...</audio>
The function is called whenever the volume property of the media element changes, including programmatic changes and user interactions with the volume controls.
Using onvolumechange with Video Element
Example
Following example demonstrates the onvolumechange attribute with a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video Volume Change Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Volume Change Example</h2>
<p id="status">Change the volume to see the event trigger</p>
<video id="myVideo" width="320" height="240" controls onvolumechange="volumeChanged()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<script>
function volumeChanged() {
var video = document.getElementById("myVideo");
var status = document.getElementById("status");
if (video.muted) {
status.innerHTML = "Video is muted";
} else {
status.innerHTML = "Volume changed to: " + Math.round(video.volume * 100) + "%";
}
}
</script>
</body>
</html>
The output displays the current volume percentage or mute status when the user adjusts the volume controls −
Video Volume Change Example Change the volume to see the event trigger [Video player with controls] (Status updates to show current volume percentage or "Video is muted")
Using onvolumechange with Audio Element
Example
Following example shows how to use the onvolumechange attribute with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio Volume Change Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Volume Control</h2>
<p id="volumeInfo">Current Volume: 100%</p>
<audio id="myAudio" controls onvolumechange="audioVolumeChanged()">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<div style="margin-top: 15px;">
<button onclick="muteAudio()">Toggle Mute</button>
<button onclick="setVolume(0.5)">Set 50%</button>
<button onclick="setVolume(1.0)">Set 100%</button>
</div>
<script>
function audioVolumeChanged() {
var audio = document.getElementById("myAudio");
var info = document.getElementById("volumeInfo");
if (audio.muted) {
info.innerHTML = "Audio is muted";
info.style.color = "red";
} else {
var volumePercent = Math.round(audio.volume * 100);
info.innerHTML = "Current Volume: " + volumePercent + "%";
info.style.color = "black";
}
}
function muteAudio() {
var audio = document.getElementById("myAudio");
audio.muted = !audio.muted;
}
function setVolume(level) {
var audio = document.getElementById("myAudio");
audio.volume = level;
}
</script>
</body>
</html>
This example shows volume changes from both user controls and programmatic changes. The buttons demonstrate that the onvolumechange event fires regardless of how the volume is modified.
Audio Volume Control Current Volume: 100% [Audio player with controls] [Toggle Mute] [Set 50%] [Set 100%] (Volume info updates when controls are used or buttons are clicked)
JavaScript Event Listener Alternative
Instead of using the onvolumechange attribute, you can add event listeners using JavaScript −
Example
<!DOCTYPE html>
<html>
<head>
<title>Volume Change with Event Listener</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Volume Change Event Listener</h2>
<p id="eventLog">Volume events will appear here</p>
<video id="videoPlayer" width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<script>
var video = document.getElementById("videoPlayer");
var eventLog = document.getElementById("eventLog");
var eventCount = 0;
video.addEventListener("volumechange", function() {
eventCount++;
var timestamp = new Date().toLocaleTimeString();
var volumeLevel = video.muted ? "Muted" : Math.round(video.volume * 100) + "%";
eventLog.innerHTML = "Event #" + eventCount + " at " + timestamp +
" - Volume: " + volumeLevel;
});
</script>
</body>
</html>
The JavaScript event listener approach provides more flexibility and follows modern web development practices. Each volume change is logged with a timestamp.
Volume Change Event Listener Volume events will appear here [Video player with controls] (Log updates: "Event #1 at 10:30:45 AM - Volume: 75%")
Common Use Cases
The onvolumechange event is commonly used for −
-
Volume indicators − Displaying current volume levels in custom media player interfaces.
-
User preference tracking − Saving user's preferred volume settings to localStorage or cookies.
-
Accessibility features − Providing audio feedback or visual indicators for volume changes.
-
Analytics − Tracking how users interact with media controls for user experience analysis.
Browser Compatibility
The onvolumechange event is supported by all modern browsers that support HTML5 video and audio elements. This includes Chrome, Firefox, Safari, Edge, and Opera. The event works consistently across desktop and mobile platforms.
Conclusion
The onvolumechange attribute provides a simple way to respond to volume changes in HTML5 media elements. It triggers for any volume modification, whether through user interaction or programmatic changes, making it useful for creating responsive media interfaces and tracking user behavior.
177 Views
