HTML Reference Manual

Comprehensive List of HTML Tags

HTML Audio/Video DOM volumechange event

The volumechange event is triggered when the volume is changed.

Online Example

Pop up a prompt message when the volume of the video changes:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio</title>/Video onvolumechange event usage-Basic Tutorial(oldtoolbag.com)</title>/title>
</head>
<body>
<p>Try changing the volume of the video.</p>
<video id="myVideo" width="320" height="176" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　Your browser does not support HTML5　video tag.
</video>
<script>
var　vid　=　document.getElementById("myVideo");
vid.onvolumechange　=　function()　
{
　　　　alert("Volume has changed");
};
</script>　　
</body>
</html>

Test and see ‹/›

Definition and Usage

Every time the video/A volumechange event occurs when the volume of the audio changes.

Cases where the event is referenced:

Increase or decrease volume
Mute or unmute

Tip: Use Audio/of the Video Object volume property to set or return the audio/Video (audio/volume of the video (audio)

Browser Compatibility

IEFirefoxOperaChromeSafari

Syntax

In HTML:

<audio|video onvolumechange="myScript">Try it out

In JavaScript:

audio|video.onvolumechange=function(){myScript};Try it out

In JavaScript, use the addEventListener() method:

audio|video.addEventListener("volumechange", myScript);Try it out

Note: Internet Explorer 8 and earlier IE versions do not support addEventListener() Methods.

Technical Details

Supported HTML Tags:	<audio> and <video>
Supported JavaScript Objects:	Audio, Video

Online Example

Pop up a prompt message when the volume of the audio changes:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio</title>/Video onvolumechange event usage-Basic Tutorial(oldtoolbag.com)</title>/title>
</head>
<body>
<p>Try changing the volume of the audio.</p>
<audio id="myAudio" controls>
　　<source src="horse.ogg" type="audio/ogg">
　　<source src="horse.mp3" type="audio/mpeg">
　　Your browser does not support HTML5　video tag.
</audio>
<script>
var aud = document.getElementById("myAudio");
aud.onvolumechange = function()　
{
　　　　alert("Volume has changed");
};
</script>
</body>
</html>

Test and see ‹/›

HTML Audio/Video DOM Reference Manual

HTML: <template> tag