**`muted`** is a boolean attribute that silences a `<video>` or `<audio>` element's audio track from the start. Its most important practical use today is enabling `autoplay`: browsers only allow media to autoplay automatically if it's also muted, specifically to prevent unwanted, disruptive sound from playing without a user's action. Users can still unmute manually via the native controls (if `controls` is present) or you can toggle it programmatically with JavaScript (`element.muted = false`), typically in response to a user click.
1Understanding muted
`muted` is a boolean attribute that silences a <video> or <audio> element's audio track from the start. Its most important practical use today is enabling autoplay: browsers only allow media to autoplay automatically if it's also muted, specifically to prevent unwanted, disruptive sound from playing without a user's action. Users can still unmute manually via the native controls (if controls is present) or you can toggle it programmatically with JavaScript (element.muted = false), typically in response to a user click.
Setting muted as an HTML attribute and setting element.muted = true in JavaScript aren't always perfectly interchangeable across all browsers for autoplay purposes — for autoplay specifically, the HTML attribute is the more reliable choice.
<video autoplay muted loop>
<source src="/hero-loop.mp4" type="video/mp4">
</video>2Practical Example
Here is a real-world application of muted showing how it is used in production HTML.
<!-- Letting the user opt into sound -->
<video id="promo" autoplay muted loop></video>
<button onclick="document.getElementById('promo').muted = false">Unmute</button>3Best Practices
Follow these guidelines when working with muted:
1. Add muted whenever you need autoplay to actually work
2. Let users unmute via a visible button or the native controls, rather than forcing silence with no way to enable sound
3. Prefer the HTML muted attribute over only setting the JS property when autoplay is involved
Tip: Setting muted as an HTML attribute and setting element.muted = true in JavaScript aren't always perfectly interchangeable across all browsers for autoplay purposes — for autoplay specifically, the HTML attribute is the more reliable choice.
<video autoplay muted loop>
<source src="/hero-loop.mp4" type="video/mp4">
</video>