Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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

SynchronousNo
BubblesNo
CancelableNo

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

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.


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

audio element
audio object
document
source
video element
video object
window
Reference
volume
muted
Events example

 

 

Show:
© 2014 Microsoft