The HTML muted attribute
The HTML muted attribute makes an <audio> or <video> element start with its sound off. It is a boolean attribute that sets only the initial state, so viewers can still unmute through the controls. Browsers generally let muted media autoplay, which is why MDN's autoplay guide pairs muted with autoplay.
Overview
The muted attribute starts an audio or video element with its sound turned off. It is a boolean attribute of <video> and <audio>, so the bare word is enough, and the HTML Standard defines it as the default value for muting.
The attribute only sets the starting state. Once a script assigns the muted property or the viewer clicks the speaker icon, the attribute has no further effect, and it stays in the markup even while sound plays. In JavaScript, defaultMuted reflects the attribute and muted reports whether the element is muted right now.
Most people reach for muted because of autoplay. Browsers usually block media that would play sound before the viewer interacts with the page, but MDN's autoplay guide notes that the block is not applied when the audio track is muted.
To autoplay a video that has an audio track, MDN's guide says to mute it by default with autoplay muted, and it notes that Safari also needs playsinline. Unmuting from script without a click can pause the element again, because the HTML Standard lets a browser pause media that is no longer allowed to play.
Syntax
<video src="intro.mp4" autoplay muted loop playsinline></video>Values
| Value |
|---|
| A boolean attribute: present or absent. |
Example
<video id="clip" src="https://codeshack.io/web/example.mp4" width="300" autoplay muted loop playsinline controls></video>
<p><button type="button" id="toggle">Unmute</button> <output id="state"></output></p>
<script>
const clip = document.getElementById('clip');
const state = document.getElementById('state');
const show = () => {
state.textContent = 'muted: ' + clip.muted + ', defaultMuted: ' + clip.defaultMuted;
};
document.getElementById('toggle').addEventListener('click', (e) => {
clip.muted = !clip.muted;
e.target.textContent = clip.muted ? 'Unmute' : 'Mute';
});
clip.addEventListener('volumechange', show);
show();
</script>Best practices
- Pair
mutedwith autoplay and playsinline when a video has to start on its own, and keep controls so viewers can turn the sound on. - Toggle sound with the
mutedproperty in JavaScript. Removing the attribute stops working once the viewer or a script has changed the mute state. - Handle the promise returned by
play()when a script unmutes and plays, because a browser that does not allow playback in the current context rejects it with aNotAllowedError. - Add captions with a <track> element, so a video that starts silent still gets its spoken words across.
Accessibility
Starting muted keeps autoplay clear of WCAG success criterion 1.4.2. That criterion asks for a pause, stop or volume control whenever audio plays automatically for more than 3 seconds, and a muted element plays no audio at all.
Motion is judged separately. Under criterion 2.2.2, a video that starts on its own, runs longer than five seconds and appears alongside other content needs a way to pause, stop or hide it, so muted autoplay video still needs controls or a pause button.