title: Most common audio volume range mode
body: <p>Setting the audio (media) element volume can be done with
  <code>media.volume [ = value ]</code>
  as stated <a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-volume-dev" rel="nofollow noreferrer">here</a>, where value is a float/double value between 0 and 1. The page also states that &quot;The range need not be linear.&quot;. I am trying to play sounds at specific relative values. I.e. play one sound at reference level and then another, say 3 dB lower.
  The standard does not specify if the range is scaling the energy (square of waveform) or pressure (wave-form) (or something else), so I guess it's the latter (raw waveform). I.e.
  To reduce by 3 dB I do the following:</p>
  <pre><code>let dL = -3;
  media.volume *= 20 * Math.log10(10,dL/20);
  </code></pre>
  <p>I have tested with a professional sound pressure level meter (B&amp;K 2250), reducing in steps from 0 dB to -78 dB, and only at the last step was there a bit background noise (electrical) from the soundcard (motherboard) that resulted in less reduction of the output level than expected. Otherwise the result was a perfectly linear shift in output level with the programmatically shift in level (<code>dL</code>). I have tested this with (Chrome/EDGE and Firefox, latest versions as of today 2021-09-02).</p>
  <p>So - the standard is a bit vague but the way these three browsers interpret the mode/way of scaling sound level seems the most natural way. Does anyone know if any other browser interpret the volume attribute differently?</p>
  <p>Here is my complete test code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Test audio level&lt;/h1&gt;
      &lt;div id=&quot;container&quot;&gt;
          &lt;audio id=&quot;music&quot;&gt;
              &lt;source src=&quot;94dB 1kHz.WAV&quot; type=&quot;audio/mpeg&quot; /&gt;
          &lt;/audio&gt;   
      &lt;/div&gt;
      &lt;button onclick=&quot;lowerAudio()&quot;&gt;Lower&lt;/button&gt;
      &lt;button onclick=&quot;raiseAudio()&quot;&gt;Raise&lt;/button&gt;
      &lt;button onclick=&quot;fadeAudio()&quot;&gt;Fade out&lt;/button&gt;
      
      &lt;script&gt;
      music = document.getElementById(&quot;music&quot;);
      music.controls = true;
      music.loop=true;
      music.load();
  
     
      var scaleDown = Math.pow(10,-3/20);
      var scaleUp = Math.pow(10,3/20);
      var fadeOutFactor = Math.pow(10,-0.5/20);
  
      function lowerAudio() {
          let v = music.volume * scaleDown;
          if (v &gt; 0 )  {music.volume =v;}
          var dB = 20*Math.log10(music.volume);
          console.log(&quot;music is now at &quot; + dB + &quot; dB and volume is &quot; + music.volume);
      }
  
      function raiseAudio() {
          let v = music.volume * scaleUp;
          if (v &lt;= 1 )  {music.volume =v;}
          else {music.volume = 1;}
          var dB = 20*Math.log10(music.volume);
          console.log(&quot;music is now at &quot; + dB + &quot; dB and volume is &quot; + music.volume);
      }
  
      
      function fadeAudio() {
          var fadeAudio = setInterval(function () {
              // check if higher than -100 dB
              if (music.volume &gt; 1e-5) {
              music.volume *= scaleDown;
          }
          else
          {
              var dB = 20*Math.log10(music.volume);
              console.log(&quot;music is now at &quot; + dB + &quot; dB and volume is &quot; + music.volume);
              clearInterval(fadeAudio);
          }
          }, 50);
      }
  
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>