volume property

Article
05/02/2017

Gets or sets the volume level for audio portions of the media element.

Syntax

object.get_volume(number* volume);

Property values

Type: number

The current playback volume as a number in the range of 0.0 to 1.0 (quietest to loudest).

Standards information

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

Remarks

Volume ranges do not need to be linear. When muted is applied, this property is ignored.

Examples

This example shows how to use a input type=range control to adjust the volume on an audio element. The range control's min and max are set to 0-100%. The change event is handled and sets the volume property on the audio element. Since volume's range is 0-1, the range value is divided by 100. The range control is not synchronized with the control's volume control. See this 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%" >     
    <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>
  <br />
  <label>Volume: <input type="range" min="0" max="100" value="100" id="volumeRange"/></label>
  <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);

    var volumeRange = document.getElementById("volumeRange");
    volumeRange.addEventListener("change", function () {
      audioElm.volume = volumeRange.value / 100; 
    }, false);


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

Share via