volumechange | onvolumechange event

Occurs when the volume is changed, or playback is muted or unmuted.

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

Syntax

Event Property	object.onvolumechange = handler;
addEventListener Method	object.addEventListener("volumechange", handler, useCapture)

Event information

Synchronous	No
Bubbles	No
Cancelable	No

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

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

Remarks

The volume property of the element represents the current volume level.

The default playback volume is 1 (100 percent). The playback volume cannot be increased beyond 100 percent.

To invoke this event, do one of the following:

Increase or decrease the volume.
Mute or unmute the playback.

Examples

This example follows the volumechange event and displays a mute button when the volume is muted. 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>