<media-mute-button>

The <media-mute-button> component is used to toggle the sound of the media. The icon will display whether sound is enabled and the general volume level.

The content of the <media-mute-button> will update based on the audio volume.

• When the volume is off, the component will display the contents of the off slot.
• When the volume is low, 0-50%, the component will display the contents of the low slot.
• When the volume is medium, 50-75%, the component will display the contents of the medium slot.
• When the volume is high, 75-100%, the component will display the contents of the high slot.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
  </media-control-bar>
</media-controller>

You can modify the contents of the <media-mute-button> componnt using slots. This is useful if you’d like to use your own custom mute button instead of the default one provided by media-chrome.

Here’s an example of how you can replace the volume levels with the words that correspond to the level.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-volume-range></media-volume-range>
    <media-mute-button>
      <span slot="high">High</span>
      <span slot="medium">Medium</span>
      <span slot="low">Low</span>
      <span slot="off">Off</span>
    </media-mute-button>
  </media-control-bar>
</media-controller>

Alternatively, if you would like to represent all of the volume levels using a single element you could use the icon slot instead. This is useful for creating an animated icon that transitions between states. Here’s a basic example that uses CSS to change an element based on the volume level.

.my-icon {
  border-radius: 50%;
  height: 100%;
  width: 24px;
  background: red;
  transition: background .4s;
}
media-mute-button[mediavolumelevel='low'] .my-icon {
  background: lightyellow;
}
media-mute-button[mediavolumelevel='medium'] .my-icon {
  background: lightblue;
}
media-mute-button[mediavolumelevel='high'] .my-icon {
  background: lightgreen;
}

The <media-mute-button> doesn’t expose any configuration attributes. However, it will be updated with Media UI Attributes any time the volume level changes.

You can use these attributes to style the button. For example, turn the background color red when the media is muted.

media-mute-button[mediavolumelevel="off"] {
  --media-control-background: red;
}

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.