title: javascript audio fade out
body: <p>When I press 'Arrow Up' button on keyboard, I want my audio fade out and stop. It seems to fade out, however, it appears again and never stops.</p>
  
  <p><em>music.html:48 Uncaught IndexSizeError: Failed to set the 'volume' property on 'HTMLMediaElement': The volume provided (-0.1) is outside the range [0, 1].</em></p>
  
  <p>I am beginner of Javascript.</p>
  
  <p>Here is my code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;body&gt;
  
  &lt;input type="text" size="3" value="1" id="numtext" style="font-size:500px" &gt;
  
  &lt;audio id=1&gt;
      &lt;source src=BGM/a.mp3&gt;
  &lt;/audio&gt;
  
  &lt;audio id=2&gt;
      &lt;source src=BGM/b.mp3&gt;
  &lt;/audio&gt;
  
  &lt;audio id=3&gt;
      &lt;source src=BGM/c.mp3&gt;
  &lt;/audio&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>    &lt;script language="JavaScript"&gt;
  
  var interval
  var timeout
  
  document.onkeydown = function() {
  
  if(event.keyCode == 38){
          var x = document.getElementById('numtext').value;
              var sounds = document.getElementById(x);
  
          interval = setInterval(fade, 200);
  
          return;
  
          }
  }
  
  function fade() {
  
          var x = document.getElementById('numtext').value;
              var sounds = document.getElementById(x);
          sounds.volume = sounds.volume - 0.1;
  
          var timer = setTimeout(function() {
  
          window.clearInterval(interval);
          for(i=0; i&lt;sounds.length; i++) sounds[i].pause(); 
          for(i=0; i&lt;sounds.length; i++) sounds[i].currentTime = 0;
  
          }, 2000);
  
          timeout = setTimeout(stopFade, 2000);
  
  }
  
  function stopFade() {
          var x = document.getElementById('numtext').value;
              var sounds = document.getElementById(x);
  
          for(i=0; i&lt;sounds.length; i++) sounds[i].pause(); 
          for(i=0; i&lt;sounds.length; i++) sounds[i].currentTime = 0;
          sounds.volume = 1;
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Any advice?</p>