HTML onvolumechange Event Attribute

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.