HTML onpause Attribute

Introduction

The onpause attribute is an inline event handler that runs JavaScript when the pause event fires on an audio or video element. It runs when playback is paused — by the user clicking pause, pressing space, or when your code calls element.pause(). Use it to update a custom UI, save playback position, pause related animations, or log analytics. Pair with onplay when playback resumes. Check media.paused for the current state. Prefer addEventListener("pause", …) in production.

What You’ll Learn

Purpose of onpause Attribute

The primary purpose of onpause is to react when media playback stops temporarily — so your page can sync custom controls, hide a “now playing” indicator, pause background effects, or autosave the current timestamp for resume later.

The pause event fires on the media element itself. It is not the same as ended (media finished) or waiting (buffering). Use the right event for each scenario.

📝 Syntax

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

<audio controls onpause="handlePause()" onplay="handlePlay()">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>

<script>
  media.onpause = handlePause;
</script>

Syntax Rules

• Value is JavaScript executed when the pause event fires.
• Valid on <audio> and <video> elements.
• Also assignable as element.onpause in script.
• Pair with onplay to update UI when playback resumes.
• Read element.currentTime inside the handler for position.
• Modern alternative: media.addEventListener("pause", handler).
• Not for non-media elements like input or div.

💎 Values

The onpause attribute accepts a string of JavaScript code:

• onpause="handlePause()" — Call a named function.
• onpause="status.textContent = 'Paused'" — Inline statement.
• JavaScript: audio.onpause = () => { … } — property assignment.

function handlePause() {
  status.textContent = "Paused at " + formatTime(audio.currentTime);
  status.className = "status-paused";
}

audio.addEventListener("pause", handlePause);
audio.addEventListener("play", handlePlay);

Applicable Elements

onpause vs onplay vs onended

Examples Gallery

Inline audio handler, dynamic assignment, and pause position with addEventListener.

<audio controls onpause="handlePause()" onplay="handlePlay()">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>
  <p id="status">Ready</p>

<script>
  function handlePause() {
    document.getElementById("status").textContent = "Paused";
  }
  function handlePlay() {
    document.getElementById("status").textContent = "Playing";
  }
</script>

<audio controls id="dynamicAudio">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>

<script>
  document.getElementById("dynamicAudio").onpause =
    function () {
      document.getElementById("log").textContent =
        "Dynamic pause handler triggered!";
    };
</script>

audio.addEventListener("pause", function () {
  const secs = Math.floor(audio.currentTime);
  status.textContent = "Paused at " + secs + "s";
});

♿ Accessibility

• Keep native controls — Use controls or provide accessible custom buttons.
• Announce state changes — Use aria-live="polite" on custom status regions.
• Do not autoplay with sound — Respect user preferences and browser policies.
• Keyboard support — Space toggles play/pause on focused media elements.
• Provide transcripts — For audio/video learning content when possible.

💡 Best Practices