muted property

Gets or sets a flag that indicates whether the audio (either audio or the audio track on video media) is muted.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.10

Syntax

JavaScript	`muted = object.muted`

Property values

Type: Boolean

false (false): The playback is not muted.
true (true): The playback is muted.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.10

Remarks

When the audio is muted, the volume property is ignored.

Examples

This example lets you mute the audio either by clicking a button or the audio element's volume control. The mute button's text is kept in sync by handing the volumechange event and checking the muted property. See the example online.

HTML


<!DOCTYPE html>
<html>
  <head>
    <title>Simple Audio Example</title>
</head>
<body>
  <h1>Simple HTML5 audio mute example</h1>
  <audio id="audio1" autoplay="autoplay" style="width:50%" controls="controls" >     
    <source src="http://samples.msdn.microsoft.com/Workshop/samples/media/Musopen_Com_Symphony_No_5_in_C_Minor_Op_67_-_I_Allegro_con_brio.mp3" type="audio/mp3" />
    Not supported</audio>
  <br />
  Type a different MP3, WebM, or OGG file path here and press tab or click out of input box to change selections
  <br />
  <input type="text" id="audioFile" size="60"  />
  <button id="mutebutton">Mute</button>
  <div>
    This recording is performed by the Skidmore College Orchestra   
  </div>

  <script>
    var audioElm = document.getElementById("audio1");
    var button = document.getElementById("mutebutton");
    var textfield = document.getElementById("audioFile");
    textfield.addEventListener("change", function () {
      audioElm.src = textfield.value;
      audioElm.load();
      audioElm.play();
    }, false);

    //  Alternates between mute and unmute based on the value of the muted property
    button.addEventListener("click", function () {
      if (audioElm.muted == true) {
        audioElm.muted = false;
      } else {
        audioElm.muted = true;
      }
    }, false);

    audioElm.addEventListener("volumechange", function () {
      if (audioElm.muted) {
        // if muted, show mute image
        button.innerHTML = button.innerText = "Unmute"; // button text 
      } else {
        // if not muted, show not muted image
        button.innerHTML = button.innerText = "Mute"; // 
      }
    }, false);

  </script>
</body>
</html>