HTML Muted Media

by

HTML muted media allows audio or video to start without sound. This feature is useful for background videos, silent previews, product demonstrations, and other multimedia content where sound is not required immediately.

HTML provides the muted attribute for both the <audio> and <video> elements. You can enable it directly in HTML without writing JavaScript.

What Is the HTML Muted Attribute?

The muted attribute tells the browser to start an audio or video element in a muted state. For video, the picture remains visible while the sound is turned off.

Here is a basic example:

<video controls muted width="500">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

In this example, the video appears with playback controls, but its audio starts muted.

Learn more about multimedia elements in our HTML Media tutorial.

Using Muted with HTML Video

The muted attribute is commonly used with videos that play automatically. Browsers often restrict autoplay when sound is enabled, so muted videos are more likely to autoplay successfully.

<video autoplay muted loop playsinline width="600">
  <source src="background.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

Here is what each attribute does:

  • autoplay requests automatic playback.
  • muted starts the video without sound.
  • loop repeats the video after it finishes.
  • playsinline helps keep playback within the page on supported mobile browsers.
  • width sets the video width.

Autoplay is still subject to browser policies and user settings.

Using Muted with HTML Audio

You can also use the muted attribute with the <audio> element.

<audio controls muted>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

The audio player appears, but the sound starts muted. Visitors can usually unmute the audio using the browser’s playback controls.

This can be useful when you want to load an audio player without immediately producing sound.

Combining Muted with Other Attributes

The muted attribute can work alongside controls, autoplay, and loop.

For example, the following video starts muted, requests autoplay, and repeats continuously:

<video autoplay muted loop controls width="500">
  <source src="demo.mp4" type="video/mp4">
</video>

The controls attribute allows visitors to manage playback, including unmuting the video where supported.

You can learn more about these features in our tutorials on HTML Autoplay, HTML Loop, and HTML Video Controls.

Difference Between Muted and No Audio

The muted attribute does not remove the audio track from a media file. It simply starts playback with the element’s audio muted.

A video without an audio track contains no sound to play, while a video with muted may still contain sound that visitors can turn back on.

Best Practices for HTML Muted Media

Follow these practices when using muted media on your website:

  • Use muted autoplay for decorative videos when appropriate.
  • Provide controls so visitors can manage playback.
  • Avoid relying on sound alone to communicate important information.
  • Add captions or other alternatives for spoken content.
  • Optimize media files to improve loading speed.
  • Test playback on mobile devices and different browsers.

The muted attribute is a simple way to control the initial sound state of HTML audio and video while giving visitors more control over their experience.