HTML onvolumechange Attribute

Introduction

The onvolumechange attribute is an inline event handler that runs JavaScript when the volumechange event fires on an audio or video element. It runs when the volume level or muted state changes — for example when the user drags the volume slider, clicks the mute button, or when your code sets media.volume or media.muted. Read media.volume (0.0 to 1.0) and media.muted inside the handler. Use it to sync custom volume sliders, show a volume percentage label, or save user preferences. Prefer addEventListener("volumechange", …) in production.

What You’ll Learn

Purpose of onvolumechange Attribute

The primary purpose of onvolumechange is to react when volume or mute state changes — so your page can keep custom controls, labels, and saved preferences in sync with the actual media state, whether the user changed it from native controls or your JavaScript did.

The volumechange event fires on the media element whenever volume or muted changes. Default volume is 1 (100%). Video players, podcasts, and music sites often show a custom slider or percentage readout alongside native controls.

📝 Syntax

Set onvolumechange on audio or video, or assign media.onvolumechange in JavaScript:

<audio controls onvolumechange="updateVolume()">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>

<script>
  media.onvolumechange = updateVolume;
  media.addEventListener("volumechange", updateVolume);
</script>

Syntax Rules

• Value is JavaScript executed when the volumechange event fires.
• Valid on <audio> and <video> elements.
• Read element.volume (0.0–1.0) and element.muted inside the handler.
• Fires when the user adjusts native volume or mute or when you set volume / muted in code.
• Also assignable as element.onvolumechange in script.
• Modern alternative: media.addEventListener("volumechange", handler).
• Not for non-media elements like input or div.

💎 Values

The onvolumechange attribute accepts a string of JavaScript code:

• onvolumechange="updateVolume()" — Call a named function.
• onvolumechange="status.textContent = Math.round(media.volume * 100) + '%'" — Inline update.
• JavaScript: audio.onvolumechange = () => { … } — property assignment.

function updateVolume() {
  var pct = Math.round(media.volume * 100);
  status.textContent = media.muted
    ? "Muted"
    : "Volume: " + pct + "%";
  status.dataset.volume = String(media.volume);
}

media.addEventListener("volumechange", updateVolume);

Applicable Elements

onvolumechange vs setting volume vs onratechange

Examples Gallery

Inline audio handler, dynamic assignment, and a custom volume slider with addEventListener.

<audio controls id="myMedia" onvolumechange="updateVolume()">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>
<p id="status">Volume: 100%</p>

<script>
  function updateVolume() {
    var media = document.getElementById("myMedia");
    var pct = Math.round(media.volume * 100);
    document.getElementById("status").textContent =
      media.muted ? "Muted" : "Volume: " + pct + "%";
  }
</script>

<script>
  media.onvolumechange = function () {
    log.textContent = this.muted
      ? "Audio muted"
      : "Volume: " + Math.round(this.volume * 100) + "%";
  };
</script>

slider.addEventListener("input", function () {
  media.volume = parseFloat(slider.value);
});

media.addEventListener("volumechange", function () {
  slider.value = String(media.volume);
  status.textContent = media.muted
    ? "Muted"
    : "Volume: " + Math.round(media.volume * 100) + "%";
});

♿ Accessibility

• Label volume controls — Use aria-label on custom sliders like “Volume” or “Playback volume.”
• Announce changes — Put the current volume in an element with aria-live="polite".
• Do not hide native controls — Unless you rebuild them fully accessibly, keep browser media controls available.
• Keyboard support — Custom volume sliders must be focusable; range inputs work with arrow keys by default.
• Mute state — When muted, announce “Muted” clearly rather than showing 0% alone (volume may still be non-zero while muted).

💡 Best Practices