title: Audio range volume slider Javascript/HTML5
body: <p>I'm in my first week of learning how to code and running into some trouble with HTML5 audio on how to connect a slider to the volume.</p>
  
  <p>My code is below and any suggestions are appreciated. The main part I'm unsure about is my script for <code>setVolume()</code>; I'm just having trouble getting my head around it.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;head&gt;
      &lt;title&gt;Slider + Play/Pause&lt;/title&gt;
  
      &lt;script&gt;
          "use strict";
          /*function playMusic() {
             document.getElementById("mediaClip").play();
         }*/
  var mediaClip = document.getElementbyId("mediaClip");
      var volume1 = document.getElementbyId("volume1");
  
  function playPause() {
      var mediaClip = document.getElementById("mediaClip");
      if (mediaClip.paused) {
          mediaClip.play();   
      } else {
          mediaClip.pause();
      }
  }
  
  function change() {
      var button1 = document.getElementById("button1");
      if (button1.value==="Play") button1.value = "Pause";
      else button1.value = "Play";
  }
  
  function setVolume() {
     var mediaClip = document.getElementById("mediaClip").value;
     document.getElementById("mediaClip").value = mediaClip;
     mediaClip.volume = document.getElementById("volume1").value;
  
  }
      &lt;/script&gt;      
  &lt;/head&gt;
  &lt;body&gt;
      &lt;audio id="mediaClip" src="takeMeToChurchHozier.mp3" controls&gt;
          &lt;p&gt;Your browser does not support the audio element&lt;/p&gt;
      &lt;/audio&gt;
      &lt;br/&gt;
      &lt;input onclick="change();playPause()" type="button" value="Play"       id="button1"&gt;
      &lt;br/&gt;
      &lt;input type="range" onchange="setVolume()" id='volume1' min=0 max=1      step=0.01 value='1'&gt;
          &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>