HTML onvolumechange Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The onvolumechange HTML event attribute is a JavaScript event that occurs when the volume of an audio or video element is changed. This event can be used to trigger custom actions when the user changes the volume, such as displaying a volume slider or updating a volume level indicator.

The onvolumechange event is fired whenever the volume or muted attribute of an audio or video element changes. It is important to note that this event is not fired when the volume is changed by a user gesture, such as clicking a volume button or dragging a volume slider. Instead, it is only fired when the volume is changed programmatically, such as by calling the volume property of an audio or video element.

To use the onvolumechange event, simply add the attribute to an audio or video element and specify the name of a JavaScript function to be called when the event occurs. For example, the following code will call the function myFunction() whenever the volume of the audio element with the ID myAudio is changed:

<audio id="myAudio" onvolumechange="myFunction()">
  ...
</audio>

The myFunction() function can then be used to perform any desired action, such as displaying a volume slider, updating a volume level indicator, or sending a request to a server.

Here is an example of a complete HTML document that uses the onvolumechange event to display a volume slider:

<!DOCTYPE html>
<html>
<head>
  <title>onvolumechange Example</title>
</head>
<body>
  <audio id="myAudio" onvolumechange="updateVolumeSlider()">
    <source src="audio.mp3" type="audio/mpeg">
  </audio>

  <input type="range" id="volumeSlider" min="0" max="1" value="0.5">

  <script>
    function updateVolumeSlider() {
      const volume = document.getElementById("myAudio").volume;
      document.getElementById("volumeSlider").value = volume;
    }
  </script>
</body>
</html>

In this example, the updateVolumeSlider() function is called whenever the volume of the audio element with the ID myAudio is changed. This function then updates the value of the volume slider element with the ID volumeSlider to match the current volume of the audio element.

Syntax

<element onvolumechange="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE HTML>

<html>

<body>



<p id="demo">Change the sound of audio.</p>



<audio id="myAudio" controls onvolumechange="myFunction()">  

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>



<script>

function myFunction() {

    document.getElementById("demo").innerHTML = "You changed the sound";

}

</script> 



<p>

This example shows how to use the onvolumechange attribute for an AUDIO element.</p>



</body>

</html>