Audio Volume: Quick & Easy HTML Guide For Setting Initial Volume

Attribute of

New Audio HTML Element: Master It Out Now With Our Code Example

What does Audio Volume: Quick & Easy HTML Guide For Setting Initial Volume do?

Specifies the initial volume setting of the audio element, in a range from 0.0 to 1.0.

Code Example

<h3>Low Volume </h3>
<audio controls volume="0.1" id="audio-example-low" class="audio-example">
  <!-- One or more source files, each referencing the same audio but in a different file format.
    The browser will choose the first file which it is able to play. -->
   <source src="/wp-content/uploads/flamingos.ogg">
   <source src="/wp-content/uploads/flamingos.mp3">

    You will see this text if native audio playback is not supported.
    <!-- You could use this fall-back feature to insert a JavaScript-based audio player. -->
</audio>

<small>Audio by  <a href="https://soundcloud.com/beeldengeluid">Beeld en Geluid</a> [<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>], <a href="https://commons.wikimedia.org/wiki/File%3AArtis%2C_enkele_flamingo&#039;s_-_SoundCloud_-_Beeld_en_Geluid.ogg">via Wikimedia Commons</a></small>

<h3>High Volume </h3>
<audio controls volume="0.9" id="audio-example-loud" class="audio-example" src="/wp-content/uploads/flamenco.mp3">

    You will see this text if native audio playback is not supported.
    <!-- You could use this fall-back feature to insert a JavaScript-based audio player. -->
</audio>

<small>Audio by JCZA [<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>] , via <a href="https://commons.wikimedia.org/wiki/File:JCZA_-_JCzarnecki-Flamenco.ogg">Wikimedia Commons</a></small>



<style>
.audio-example {
display: block;
}
</style>

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.