HTML muted Attribute

Introduction

The muted attribute is a boolean HTML attribute on <video> and <audio> that silences media when it loads. Video still plays visually; audio output is off until the user unmutes via controls or JavaScript sets element.muted = false. It is common for background hero videos, preview clips, and autoplay content because browsers often block autoplay with sound. Add it by writing muted alone—there is no separate unmuted value.

What You’ll Learn

Purpose of muted Attribute

The primary purpose of muted is to control initial audio output. A looping background video on a landing page should not blast sound unexpectedly. An embedded preview can play silently until the visitor chooses to listen. Setting muted in HTML establishes that default before playback starts.

Modern browsers restrict autoplay with audio to protect users. Combining autoplay with muted (and often playsinline on mobile) is the standard pattern for auto-starting video. Always provide a visible way to enable sound when audio is important to the content.

📝 Syntax

Add the boolean muted attribute to video or audio:

<video controls muted playsinline>

  <source src="movie.webm" type="video/webm">

  Your browser does not support the video tag.

</video>



<audio controls muted src="ambient.mp3"></audio>



<video autoplay muted loop playsinline src="hero.mp4"></video>

Syntax Rules

• Boolean attribute—write muted alone; presence means silenced.
• Valid on <video> and <audio> only.
• JavaScript IDL property: mediaElement.muted = true (boolean).
• Pair with controls so users can unmute when sound matters.
• Often combined with autoplay and playsinline for background video.
• Does not replace captions—mute audio track, not accessibility requirements.

💎 Values

The muted attribute is boolean—it has no meaningful string value:

• muted — Attribute present; media starts with audio silenced.
• muted="" — Also valid in HTML5; same as bare muted.
• Attribute absent — Normal audio output (subject to volume and user settings).
• JavaScript: el.muted = true mutes; el.muted = false restores audio.

const video = document.getElementById("myVideo");

video.muted = true;   // mute

video.muted = false;  // unmute

Applicable Elements

muted vs volume vs removing audio

Examples Gallery

Muted video with toggle, muted audio element, and setting element.muted with JavaScript.

<video controls muted playsinline>

  <source src="movie.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

<audio controls muted src="ambient.mp3"></audio>

<video id="myVideo" controls src="clip.mp4"></video>



<script>

  const video = document.getElementById("myVideo");

  video.muted = true;   // mute

  video.muted = false;  // unmute

</script>

♿ Accessibility

• Do not hide important speech — If dialogue matters, provide captions even when video is muted.
• Let users control sound — Offer clear unmute buttons; do not trap users in silent playback for essential content.
• Avoid surprise autoplay — Muted autoplay is more acceptable than loud autoplay, but moving video can still distract; respect prefers-reduced-motion.
• Label controls — Custom mute toggles need accessible names (e.g. “Unmute video”).
• Transcripts for audio-only — Muted audio with no alternative text excludes users who rely on hearing.

💡 Best Practices