HTML onplay Attribute

Introduction

The onplay attribute is an inline event handler that runs JavaScript when the play event fires on an audio or video element. It runs when playback starts or resumes — by the user clicking play, pressing space, or when your code calls element.play(). Use it to show a “now playing” indicator, start animations, pause other media, or log analytics. Pair with onpause when playback stops. Prefer addEventListener("play", …) in production.

What You’ll Learn

Purpose of onplay Attribute

The primary purpose of onplay is to react when media playback begins — so your page can update custom controls, show progress UI, sync lyrics or captions, pause background audio, or track that the user started listening or watching.

The play event fires on the media element when playback is initiated. It also fires when resuming after a pause. It is related to but not identical to playing, which fires once media is actually rendering frames or sound after buffering.

📝 Syntax

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

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

<script>
  media.onplay = startPlayback;
</script>

Syntax Rules

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

💎 Values

The onplay attribute accepts a string of JavaScript code:

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

function startPlayback() {
  status.textContent = "Now playing";
  status.className = "status-playing";
  indicator.hidden = false;
}

audio.addEventListener("play", startPlayback);
audio.addEventListener("pause", stopPlayback);

Applicable Elements

onplay vs onpause vs onplaying

Examples Gallery

Inline audio handler, addEventListener assignment, and custom play button.

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

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

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

<script>
  document.getElementById("myAudio").addEventListener("play", function () {
    document.getElementById("log").textContent =
      "Playback started!";
  });
</script>

playBtn.addEventListener("click", function () {
  audio.play(); // triggers play event → onplay / listener runs
});

audio.addEventListener("play", function () {
  status.textContent = "Now playing via custom button";
});

♿ Accessibility

• Label custom play buttons — Use clear text like “Play audio” or aria-label.
• Announce playing state — Use aria-live="polite" on status regions.
• Do not autoplay with sound — Respect user preferences and browser autoplay policies.
• Keyboard support — Custom buttons must be focusable and activatable with Enter/Space.
• Provide captions — For video content when audio/dialog is important.

💡 Best Practices