HTML onratechange Attribute

Introduction

The onratechange attribute is an inline event handler for the ratechange event on audio or video elements. It runs when the playback speed changes — for example when the user picks 1.5× from the browser’s speed menu or when your code sets media.playbackRate. Read media.playbackRate inside the handler (1 = normal, 0.5 = half speed, 2 = double). Use it to update custom speed buttons, show a speed label, or log analytics. Prefer addEventListener("ratechange", …) in production.

What You’ll Learn

Purpose of onratechange Attribute

The primary purpose of onratechange is to react when playback speed changes — so your page can keep custom controls, labels, and analytics in sync with the actual rate, whether the user changed it from native controls or your JavaScript did.

The ratechange event fires on the media element whenever playbackRate changes. Default speed is 1 (100%). Podcast apps, language-learning sites, and video players often expose speed presets like 0.75× or 2×.

📝 Syntax

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

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

<script>
  media.onratechange = handleRateChange;
  media.addEventListener("ratechange", handleRateChange);
</script>

Syntax Rules

• Value is JavaScript executed when the ratechange event fires.
• Valid on <audio> and <video> elements.
• Read element.playbackRate inside the handler for the new speed.
• Fires when the user changes speed in native controls or when you set playbackRate in code.
• Also assignable as element.onratechange in script.
• Modern alternative: media.addEventListener("ratechange", handler).
• Not for non-media elements like input or div.

💎 Values

The onratechange attribute accepts a string of JavaScript code:

• onratechange="handleRateChange()" — Call a named function.
• onratechange="status.textContent = media.playbackRate + 'x'" — Inline update.
• JavaScript: audio.onratechange = () => { … } — property assignment.

function handleRateChange() {
  var rate = media.playbackRate;
  status.textContent = "Playback speed: " + rate + "×";
  status.dataset.rate = String(rate);
}

media.addEventListener("ratechange", handleRateChange);

Applicable Elements

onratechange vs setting playbackRate vs onplay

Examples Gallery

Inline audio handler, dynamic assignment, and custom speed buttons with addEventListener.

<audio controls id="myMedia" onratechange="handleRateChange()">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>
<p id="status">Playback speed: 1×</p>

<script>
  function handleRateChange() {
    var rate = document.getElementById("myMedia").playbackRate;
    document.getElementById("status").textContent =
      "Playback speed: " + rate + "×";
  }
</script>

<script>
  media.onratechange = function () {
    log.textContent = "New playback rate: " + this.playbackRate + "×";
  };
</script>

btn.addEventListener("click", function () {
  media.playbackRate = parseFloat(btn.dataset.rate);
});

media.addEventListener("ratechange", function () {
  status.textContent = "Playback speed: " + media.playbackRate + "×";
  highlightActiveButton(media.playbackRate);
});

♿ Accessibility

• Label speed controls — Use clear button text like “1.5× speed” instead of icons alone.
• Announce changes — Put the current speed 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 speed buttons must be focusable and activatable with Enter/Space.
• Pitch-corrected audio — Browsers preserve pitch at higher speeds; mention this if users rely on clarity.

💡 Best Practices