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.10Internet Explorer 9

 

Syntax

object.put_muted( muted);object.get_muted(* muted);

Property values

Type: VARIANT_BOOL

FALSE (false)

The playback is not muted.

TRUE (true)

The playback is muted.

Standards information

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.


<!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>


See also

How to use HTML5 to play video files on your webpage
How to use HTML5 to Add an Audio Player to your Webpage
Make your videos accessible with Timed Text Tracks

 

 

Community Additions

ADD
Show:
© 2014 Microsoft